Vue.js 的 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染12。以下是 v-if
的基本语法和使用方法:
-
基本语法:v-if="表达式"13。如果表达式的计算结果为 “true”,则在 DOM 中创建该元素及其所有内容。如果表达式的计算结果为 “false”,则元素将被销毁1。
-
与 v-else 和 v-else-if 的配合使用:v-if 可以和 v-else-if、v-else 一起使用,但要求结构不能被“打断”13。例如:
HTML<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div>
-
在 <template> 元素上使用:如果我们想要切换不止一个元素,我们可以在一个 <template> 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 <template> 元素2。
-
v-if vs. v-show:v-if 是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。相比之下,v-show 简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display 属性会被切换2。