vue中通过点击隐藏显示内容

在 Vue 中，可以通过 `v-if` 或 `v-show` 指令来实现点击隐藏或显示内容的效果。

`v-if` 指令会根据表达式的值来动态添加或删除元素，如果表达式的值为 `false`，那么元素将被删除，如果表达式的值为 `true`，那么元素将被添加到 DOM 中。

<template>
  <div>
    <button @click="showContent = !showContent">点击显示/隐藏内容</button>
    <div v-if="showContent">这里是需要显示/隐藏的内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showContent: false
    }
  }
}
</script>

`v-show` 指令会根据表达式的值来动态控制元素的显示和隐藏，如果表达式的值为 `false`，那么元素将被隐藏，但并没有从 DOM 中删除，如果表达式的值为 `true`，那么元素将被显示出来。

<template>
  <div>
    <button @click="showContent = !showContent">点击显示/隐藏内容</button>
    <div v-show="showContent">这里是需要显示/隐藏的内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showContent: false
    }
  }
}
</script>

注意：`v-if` 与 `v-show` 的区别在于，`v-if` 会根据条件动态地添加或删除元素，而 `v-show` 只是控制元素的显示和隐藏。因此，如果需要频繁地切换元素的显示和隐藏，建议使用 `v-show`；如果需要在元素的显示和隐藏之间切换较少，建议使用 `v-if`。