一、Vue3 条件语句

在 Vue 3 中，你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染，包括 v-if、v-else-if、v-else 和 v-show 指令。

1. v-if

v-if 指令用于根据条件来渲染一个元素或组件。如果条件为真，元素或组件会被渲染到 DOM 中；如果条件为假，元素或组件不会被渲染。

<template><div><p v-if="isVisible">这段文字将会显示</p></div>
</template><script>
export default {data() {return {isVisible: true};}
};
</script>

在这个例子中，isVisible 是一个布尔值，当它为 true 时，<p> 元素会被渲染到 DOM 中；当它为 false 时，<p> 元素不会被渲染。

2. v-else-if 和 v-else

你可以使用 v-else-if 和 v-else 来添加额外的条件。

<template><div><p v-if="score > 90">优秀</p><p v-else-if="score > 60">及格</p><p v-else>不及格</p></div>
</template><script>
export default {data() {return {score: 80};}
};
</script>

在这个例子中，根据 score 的值，不同的 <p> 元素会被渲染。

3. v-show

v-show 指令与 v-if 类似，但它不会基于条件来添加或移除元素，而是简单地切换元素的 CSS 的 display 属性。这意味着即使元素被隐藏，它仍然会保留在 DOM 中。

<template><div><p v-show="isVisible">这段文字将会根据条件显示或隐藏</p></div>
</template><script>
export default {data() {return {isVisible: false};}
};
</script>

在这个例子中，当 isVisible 为 true 时，<p> 元素会显示；当为 false 时，<p> 元素会被隐藏，但它的 DOM 元素仍然存在。

4. 使用计算属性进行条件渲染

对于更复杂的条件逻辑，你可以使用计算属性来返回一个布尔值，并在模板中使用这个布尔值来决定是否渲染某个元素。

<template><div><p v-if="shouldShowMessage">这是一个消息</p></div>
</template><script>
export default {data() {return {userLevel: 2};},computed: {shouldShowMessage() {return this.userLevel >= 2;}}
};
</script>

在这个例子中，shouldShowMessage 是一个计算属性，它返回一个布尔值，表示是否应该显示消息。

5. v-if与v-show比较

在 Vue 3 中，v-if 和 v-show 都用于条件性地渲染元素，但它们在实现方式和性能上有一些区别。

v-if

v-if 是一个“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

特点：

• 条件为假时，不会渲染元素到 DOM 中。
• 每次条件改变都会销毁和重建元素及其子组件，包括所有的事件监听器。
• 条件为假时，不会有任何性能开销，因为 DOM 中没有对应的元素。
• 更加适合不频繁切换的条件渲染。

v-show

v-show 就简单得多——不论初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

特点：

• 无论条件真假，元素都会被渲染到 DOM 中。
• 条件为假时，通过 CSS 设置 display 属性为 none 来隐藏元素。
• 条件改变时，元素只是简单地从可见变为不可见，不会有销毁和重建的开销。
• 适合频繁切换的条件渲染。

性能考虑

如果你非常关心性能，并且条件不频繁切换，使用 v-if 会更好，因为这样可以避免不必要的渲染和销毁/重建的开销。然而，如果条件频繁切换，使用 v-show 会更好，因为它只是简单地切换 CSS 属性，而不会涉及组件的销毁和重建。

使用场景

• 如果一个元素需要非常频繁地切换，使用 v-show 会更好。
• 如果在运行时条件不太可能改变，或者元素非常重（有很多子组件或监听器），使用 v-if 更好。

在实际应用中，可以根据具体的需求来选择使用 v-if 还是 v-show。在大多数情况下，Vue 的优化足以让这两种方式在性能上相差无几，因此选择哪种方式更多是基于代码的可读性和维护性的考虑。

二、Vue3 循环语句

在 Vue.js 中，你可以使用 v-for 指令来执行循环操作，遍历数组或对象，并基于每个元素或属性渲染一个模板块。

1. 遍历数组

使用 v-for 指令遍历数组时，你可以指定一个别名来代表当前元素，并使用 in 关键字来指定要遍历的数组。

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' }]};}
};
</script>

在这个例子中，items 是一个包含对象的数组，我们使用 v-for="item in items" 来遍历这个数组，并为每个对象渲染一个 <li> 元素。:key="item.id" 是用来跟踪每个节点的身份，从而重用和重新排序现有元素。

2. 遍历对象

你也可以使用 v-for 来遍历对象的属性。

<template><div><ul><li v-for="(value, name, index) in object" :key="index">{{ name }}: {{ value }}</li></ul></div>
</template><script>
export default {data() {return {object: {firstName: 'John',lastName: 'Doe',age: 30}};}
};
</script>

在这个例子中，object 是一个包含属性的对象。v-for="(value, name, index) in object" 遍历这个对象的每个属性，并输出属性的名称和值。

3. 使用索引

在遍历数组时，你还可以使用第三个参数来获取当前元素的索引。

<template><div><ul><li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item.text }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ text: 'Item 1' },{ text: 'Item 2' },{ text: 'Item 3' }]};}
};
</script>

在这个例子中，我们使用 v-for="(item, index) in items" 来同时获取当前元素和它的索引，然后在列表项中显示索引和文本。

4. 注意事项

• 当使用 v-for 时，每个节点必须有一个唯一的 key 属性，这有助于 Vue.js 跟踪每个节点的身份，从而实现高效的 DOM 更新。
• 尽量避免在同一元素上同时使用 v-if 和 v-for，因为这可能会导致渲染错误。如果确实需要条件渲染，可以考虑将元素包裹在一个父元素中，并在父元素上使用 v-if。
• 当遍历的对象或数组发生变化时，Vue.js 会自动更新 DOM 以反映这些变化。

三、相关链接

1. Vue3官方地址
2. Vue3中文文档
3. 「Vue3系列」Vue3简介及安装
4. 「Vue3系列」Vue3起步/创建项目
5. 「Vue3系列」Vue3指令
6. 「Vue3系列」Vue3 模板语法