Vue3 条件语句
条件判断
v-if
条件判断使用 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
>
yssmx
</
p
>
<
p
>
Taobao
</
p
>
</
template
>
</
div
>
<
script
>
const app = {
data() {
return {
seen: true /* 改为false,信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</
script
>
尝试一下 »
v-else
可以用 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-else-if 即 v-if 的 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-show 指令来根据条件展示元素: