vue2点击展开或收起时，把内容区域显示或者隐藏

在Vue.js 2中，你可以通过组件间的父子通信以及指令来实现在点击事件触发时动态地控制内容区域的显示或隐藏。下面是一个简单的示例：

1. 首先，假设你有一个父组件，其中包含一个按钮和一个子组件的引用：

<template>
  <div>
    <button @click="toggleContent">点击切换内容</button>
    <child-component v-if="showContent" :content="dynamicContent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      showContent: false,
      dynamicContent: '这是需要显示的内容',
    };
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent;
    },
  },
};
</script>

2. 子组件`ChildComponent.vue`可能看起来像这样，它有一个默认的`v-if`用于控制自身的可见性：

<template>
  <div v-show="parent.showContent">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    content: String,
  },
};
</script>

当你点击父组件的按钮时，`toggleContent`方法会被调用，改变`showContent`的数据属性。这会更新子组件的`v-if`条件，使得内容区域随着`showContent`的布尔值变化而显示或隐藏。