vue控制组件的显示和隐藏

Vue 可以通过条件渲染来控制组件的显示和隐藏。

一种常见的方式是使用 `v-if` 指令。该指令根据表达式的值的真假来决定是否渲染元素。例如：

<template>
  <div>
    <button @click="showComponent = !showComponent">
      {{ showComponent ? '隐藏' : '显示' }}
    </button>
    <div v-if="showComponent">
      <p>这是要显示的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    }
  }
}
</script>

上述代码中，当 `showComponent` 的值为 `true` 时，`<div v-if="showComponent">` 中的内容会被渲染出来。当 `showComponent` 的值为 `false` 时，该 `<div>` 元素不会被渲染出来。

还有一种方式是使用 `v-show` 指令。该指令的用法和 `v-if` 类似，但是 `v-show` 只是控制元素的 `display` 样式属性，不会在 DOM 树中添加或删除元素。例如：

<template>
  <div>
    <button @click="showComponent = !showComponent">
      {{ showComponent ? '隐藏' : '显示' }}
    </button>
    <div v-show="showComponent">
      <p>这是要显示的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    }
  }
}
</script>

上述代码中，当 `showComponent` 的值为 `true` 时，`<div v-show="showComponent">` 中的内容会以 `display: block` 的样式显示出来。当 `showComponent` 的值为 `false` 时，该 `<div>` 元素会以 `display: none` 的样式隐藏起来。