Vue.js条件与循环渲染的深入讲解

1. 条件渲染的指令及用法 Vue.js 提供了多种条件渲染的指令，包括 `v-if`、`v-else-if`、`v-else` 和 `v-show`，它们可以根据表达式的真假值来决定是否渲染某个元素。 - `v-if` 指令用于条件性地渲染一块内容。只有当指令的表达式返回 true 时，相关内容才会被渲染。例如： ```html <p v-if="temperature <= 10">寒冷</p> ``` - `v-else-if` 和 `v-else` 与 `v-if` 配合使用，用于实现多条件分支。`v-else-if` 提供了一个“else if 区块”，可以连续多次使用，而 `v-else` 提供了一个“else 区块”。这两个指令必须紧跟在 `v-if` 或 `v-else-if` 指令的元素后面。例如： ```html <p v-if="temperature <= 10">寒冷</p> <p v-else-if="temperature <= 25">凉爽</p> <p v-else>炎热</p> ``` - `<template>` 标签与 `v-if`：因为 `v-if` 必须依附于某个元素，但有时候需要切换多个元素。在这种情况下，可以在 `<template>` 元素上使用 `v-if`。`<template>` 是一个不可见的包装器元素，最终渲染结果不会包含 `<template>` 元素。例如： ```html <template v-if="counter === 10"> <h2>六下匹，人当送，内。</h2> <h3>六下匹，人当送，内。</h3> <h4>六下匹，人当送，内。</h4> </template> ``` - `v-show` 指令通过切换 CSS 的 `display` 属性来控制元素的显示与隐藏。它的用法类似于 `v-if`，但无论条件真假，元素始终会被渲染，只是以 `display: none;` 或 `display: block;` 的形式存在。例如： ```html <div v-show="shouldShow">v-show-{{msg}}</div> ``` 2. 循环渲染的指令及用法 在 Vue.js 中，可以使用 `v-for` 指令实现数组、对象、字符串等的遍历渲染。 - `v-for` 指令可以绑定在任何元素或组件上，其用法为 `v-for="item in items"`，其中 `items` 是被遍历的数组或对象，`item` 是当前项的别名。当与对象一起使用时，可以提供第二个参数表示键名，第三个参数表示索引。例如： ```html <ul> <li v-for="item in items"> {{ item.text }} </li> </ul> ``` 3. key 属性在虚拟 DOM 中的重要性 在使用 `v-for` 进行列表渲染时，Vue.js 通过一个称为“虚拟 DOM”的机制来追踪每个节点的身份，从而重用和重新排序现有元素。为了给 Vue 一个提示，以便它能追踪每个节点的身份，从而重用和重新排序现有元素，我们添加一个具有唯一值的 `key` 属性。`key` 属性有助于维护内部组件状态或避免渲染问题。官方推荐尽可能使用 `key`，并且不推荐使用数组索引作为 `key`，因为它会导致渲染结果不正确，特别是列表元素的顺序发生变化时。 4. v-if 和 v-show 的性能差异 - `v-if` 是“真实的”条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。 - `v-show` 仅切换元素的 CSS 属性 `display`。因此，无论初始条件如何，元素都会被渲染，只是简单地切换显示状态。 在选择使用 `v-if` 或 `v-show` 时，应该考虑组件的渲染方式以及切换的频率。如果元素需要在运行时频繁地切换，则使用 `v-show` 较为合适；如果运行时条件很少改变，则 `v-if` 更为合适。