vue v if 实现切换

使用 v-if 实现切换功能

v-if 是 Vue.js 提供的条件渲染指令，可以根据表达式的真假动态切换元素的显示与隐藏。以下是一个简单的实现切换的示例：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <p v-if="isVisible">这段文字会根据条件显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

与 v-show 的区别

v-if 和 v-show 都可以控制元素的显示与隐藏，但有以下区别：

v-if 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。当条件为假时，元素不会渲染到 DOM 中。

v-show 则总是会渲染元素，只是简单地切换 CSS 的 display 属性。

<p v-show="isVisible">这段文字会通过 CSS 的 display 属性切换</p>

使用 v-else 和 v-else-if

可以配合 v-else 和 v-else-if 实现更复杂的条件逻辑：

<div>
  <p v-if="type === 'A'">类型 A</p>
  <p v-else-if="type === 'B'">类型 B</p>
  <p v-else>其他类型</p>
</div>

性能考虑

如果需要频繁切换显示状态，使用 v-show 会有更好的性能表现，因为不需要频繁地销毁和重建 DOM 元素。

如果运行时条件很少改变，则使用 v-if 更合适，因为初始渲染条件为假时不会渲染对应的元素。