Vue.js 提供了几种条件渲染的指令，允许你根据表达式的真假值来渲染 DOM 元素。这些指令在开发动态界面时非常有用，因为它们可以根据应用的状态来显示或隐藏内容。以下是 Vue.js 中主要的条件渲染指令： 1. **`v-if`** - `v-if` 指令用于条件性地渲染一块内容。只有当指令的表达式返回 true 时，对应的元素和它的子元素才会被渲染到 DOM 中。 - 使用 `v-if` 时，元素在条件为假时会被销毁，并重新在条件为真时创建。这意味着在条件切换时，元素及它的所有子元素都会重新渲染。 2. **`v-else`** - `v-else` 指令表示 `v-if` 或 `v-else-if` 条件不满足时的备选内容。`v-else` 元素必须紧跟在 `v-if` 或 `v-else-if` 元素之后，否则它将不会被识别。 3. **`v-else-if`** - `v-else-if`，顾名思义，是 `v-if` 的“else if”版本，用于链式条件判断。它可以连续使用多次。 4. **`v-show`** - 与 `v-if` 相似，`v-show` 也用于根据条件展示元素。但是，与 `v-if` 不同的是，`v-show` 只是简单地切换元素的 CSS 属性 `display`。这意味着元素始终会被渲染并保留在 DOM 中，只是简单地切换其可见性。 - 当需要频繁切换元素的显示状态时，使用 `v-show` 会更高效，因为它避免了元素的销毁和重新创建过程。 5. **`v-for`** - 虽然 `v-for` 主要用于基于源数据多次渲染元素或模板块，但它也可以看作是一种条件渲染的形式，特别是当你需要基于数组或对象的长度或属性来渲染元素时。然而，它主要用于列表渲染。 总结来说，Vue.js 提供了 `v-if`、`v-else`、`v-else-if` 和 `v-show` 指令来实现条件渲染。这些指令在构建动态 Web 应用时非常有用，因为它们允许你根据应用的状态来控制 DOM 的显示。