淘宝双十一超级红包 》
Vue3 条件语句
在 Vue 3 中，你可以在模板中使用多种条件语句来控制组件的渲染。
主要的条件语句有 v-if、v-else-if、v-else 和 v-show，以下是它们的用法及区别：
v-if：元素在条件为false时不会被渲染到 DOM 中，适用于条件变化不频繁的情况。v-show：元素总是渲染到 DOM 中，适用于条件变化频繁的情况，切换显示隐藏性能更好。v-else-if和v-else：用于处理多个条件分支，配合v-if使用。
条件判断
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().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，因为它只是简单地切换 CSS 样式，而不是重新渲染整个元素。