实现方法：
- v-if：如果表达式为真，则显示元素。
- v-else：如果
v-if表达式为假，则显示元素。 - v-else-if：用于检查其他条件，并仅在满足时显示元素。
示例：
<template>
<div>
<p v-if="isLoggedIn">欢迎回来，{{ user.name }}！</p>
<p v-else>请登录。</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false,
user: { name: "John" },
};
},
};
</script>Vue 循环
循环可用于在 Vue 中遍历数组、对象和集合，并为每个元素呈现内容。它提供了简洁且可读的方式来显示重复数据。
实现方法：
- v-for：用于遍历数组或对象，并为每个元素创建项目模板。
- v-for="item in myArray"：遍历
myArray中的每个元素，并将其分配给变量item。 - v-for="item, index in myArray"：同时遍历元素和索引。
- v-for="item in myObject"：遍历对象中的键和值对。
示例：
<template>
<ul>
<li v-for="number in [1, 2, 3, 4, 5]">
{{ number }}
</li>
</ul>
</template>条件渲染和循环的组合
条件渲染和循环可以结合使用，以根据特定条件显示或隐藏循环元素。例如，您可以仅在某个条件满足时显示数组中的某些元素。
示例：
<template>
<ul>
<li v-for="number in [1, 2, 3, 4, 5]" v-if="number % 2 === 0">
{{ number }}
</li>
</ul>
</template>在上面的示例中，循环将遍历数字 1 到 5，但 v-if 表达式将过滤掉奇数，只显示偶数。
最佳实践
- 使用 v-if 和 v-else 配对：将元素隐藏指定为
v-else，而不是在v-if表达式中使用!运算符。 - 避免嵌套循环：尽量保持循环扁平，而不是嵌套多个循环。
- 使用键：在循环中使用键，以优化 DOM 操作和追踪唯一元素。
- 使用 v-once：将静态元素标记为
v-once，以优化其渲染。 - 避免与过多的条件渲染：过多的条件渲染可能导致性能问题，因此应谨慎使用。
