v-if的使用

v-if 是 Vue.js 中的一个指令，用于根据表达式的真假值来条件性地渲染一个元素。如果表达式为真，则元素会被渲染到 DOM 中；如果为假，则元素及其子元素不会被渲染，也不会在 DOM 树中留下任何痕迹（即它们会被完全销毁和重建，而不是简单地隐藏）。

基本用法

<template>  

  <div>  

    <!-- 如果 condition 为真，则显示这个段落 -->  

    <p v-if="condition">条件为真时显示这段文本。</p>  

  </div>  

</template>  

  

<script>  

export default {  

  data() {  

    return {  

      // 初始条件  

      condition: true,  

    };  

  },  

};  

</script>

切换多个元素

v-if 可以和 v-else-if、v-else 一起使用，以实现更复杂的条件渲染逻辑。

<template>  

  <div>  

    <p v-if="type === 'A'">A</p>  
    <p v-else-if="type === 'B'">B</p>  
    <p v-else-if="type === 'C'">C</p>  
    <p v-else>Not A/B/C</p>  

  </div>  

</template>  

  

<script>  

export default {  

  data() {  
    return {  
      type: 'A',  

    };  

  },  

};  

</script>

 

注意事项

1. 条件渲染开销：虽然 v-if 是响应式的，但频繁地切换元素的显示和隐藏可能会导致较大的性能开销，因为 Vue.js 需要不断地销毁和重建 DOM 元素。对于需要频繁切换显示隐藏状态的元素，推荐使用 v-show，因为 v-show 只是简单地切换元素的 CSS 属性 display。

2. 模板或组件的复用：如果你计划在多个地方使用相同的条件渲染逻辑，考虑将这部分逻辑封装成组件或使用 <template> 标签配合 v-if 进行复用。

3. 与 v-for 一起使用：不推荐在同一个元素上使用 v-if 和 v-for，因为这可能会导致渲染逻辑变得难以理解。如果确实需要这样做，请考虑使用计算属性来过滤列表。

示例：使用计算属性优化 v-if 和 v-for

 

<template>  

  <ul>  

    <li v-for="item in activeItems" :key="item.id">  

      {{ item.text }}  

    </li>  

  </ul>  

</template>  

  

<script>  

export default {  

  data() {  

    return {  

      items: [  

        { id: 1, text: 'Item 1', active: true },  

        { id: 2, text: 'Item 2', active: false },  

        // 更多项目...  

      ],  

    };  

  },  

  computed: {  

    // 计算属性返回活动项列表  

    activeItems() {  

      return this.items.filter(item => item.active);  

    },  

  },  

};  

</script>