Vue3 条件语句

在 Vue 中，条件语句通常通过 v-if 和 v-else 指令来实现条件渲染。这些指令允许你根据表达式的真假来决定是否渲染特定的元素或组件。

条件判断

v-if

根据表达式的真假条件性地渲染元素。如果表达式为真，则渲染该元素；如果为假，则不渲染（不会在 DOM 中生成该元素）。

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：

v-if 指令

在元素中使用 v-if 指令：

<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> const app = { data() { return { seen: true /* 改为false，信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script>

尝试一下 »

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-if 指令

在 <template> 元素上使用 v-if 指令：

<div id="app"> <template v-if="seen"> <h1>网站</h1> <p>Google</p> <p>Runoob</p> <p>Taobao</p> </template> </div> <script> const app = { data() { return { seen: true /* 改为false，信息就无法显示 */ } } } Vue.createApp(app).mount('#app') </script>

尝试一下 »

v-else

与 v-if 搭配使用，表示在前一个 v-if 表达式为假时渲染的元素。

可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 指令

随机生成一个数字，判断是否大于 0.5，然后输出对应信息：

<div id="app"> <div v-if="Math.random() > 0.5"> 随机数大于 0.5 </div> <div v-else> 随机数小于等于 0.5 </div> </div> <script> Vue.createApp(app).mount('#app') </script>

尝试一下 »

v-else-if

在 v-if 和 v-else 之间添加额外的条件判断，可以连续使用多个 v-else-if。

v-else 指令

判断 type 变量的值：

<div id="app"> <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> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

尝试一下 »

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

根据表达式的真假条件性地显示或隐藏元素，与 v-if 不同的是，v-show 始终会在 DOM 中保留元素，只是通过 CSS 的 display 属性控制元素的显示和隐藏。

我们也可以使用 v-show 指令来根据条件展示元素：

v-show 指令

<h1 v-show="ok">Hello!</h1>

尝试一下 »

如果需要频繁切换元素的显示与隐藏，推荐使用 v-show，因为它只是简单地切换 CSS 样式，而不是重新渲染整个元素。