Vue 条件渲染的终极指南，驾驭前沿技能！

v-if 和 v-else

最基本的条件渲染指令是 v-if 和 v-else。当 v-if 表达式为真时，元素将被渲染；当为假时，v-else 元素将被渲染。例如：

<template>
  <div v-if="isVisible">
    我是可见的
  </div>
  <div v-else>
    我是隐藏的
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

v-show 和 v-cloak

v-show 指令与 v-if 类似，但它不会实际删除元素。相反，它通过切换 CSS display 属性来显示或隐藏元素。这对于避免 DOM 重新渲染和保持元素状态非常有用。

v-cloak 指令用于在 Vue 实例完全初始化之前隐藏元素。它使用 CSS 类 v-cloak，可以在 CSS 中自定义。这可防止在页面加载时闪烁未初始化的数据。

v-for 和 v-if

结合 v-for 和 v-if 可以实现更复杂的条件渲染。v-for 用于遍历数组或对象，而 v-if 用于根据每个元素的条件过滤结果。例如：

<template>
  <ul>
    <li v-for="item in items" v-if="item.status === "active"">
      {{ item.name }}
    </li>
  </ul>
</template>

这将只渲染具有“active”状态的项目。

其他条件渲染技巧

除了这些指令之外，还有其他技术可以用于条件渲染：

• 三元条件渲染：使用三元运算符 v-if 表达式中，例如：v-if="condition ? trueValue : falseValue"
• 计算属性：创建计算属性，根据其他数据动态计算条件。
• 自定义指令：创建自己的指令，根据自定义逻辑控制渲染。

最佳实践

• 清晰的条件：确保条件表达式清晰且易于理解。
• 避免嵌套：避免在条件渲染指令中嵌套太多逻辑。
• 使用计算属性：对于复杂的条件，请使用计算属性将其与模板分开。
• 性能优化：使用 v-show 代替 v-if 以提高性能，特别是当频繁切换元素时。
• 可访问性考虑：确保条件渲染不会影响页面的可访问性。例如，使用 aria-hidden 属性来隐藏元素而不是删除它们。