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属性来隐藏元素而不是删除它们。
