X
XiaoSong
V1
2023/01/25阅读:40主题:默认主题
vue3条件渲染
v-if
v-if
对应的就是if
语句,当条件为真的时候渲染页面
<text v-if="show">Show</text>
const show = ref(true)
以上代码中当show
的值为true
的时候text
标签渲染
v-else
对应的是
else
,同if-else
用法:
<text v-if="show">Show</text>
<text v-else>Disappear</text>
<div class="btn" @click="show = !show">点击</div>
const show = ref(true)
当show
的值为true
时,页面如下:
点击按钮show
的值改为false
,页面如下:
v-else-if
使用的方式同
else if
语句,这里不细说了,大家可自行尝试。
template标签上的 v-if
如果我们想切换不止一个元素,那么可以把要被切换的元素用
<template>
包裹,这个标签不会被渲染它是一个包装容器。v-else
和v-else-if
也可以在<template>
上使用。
<template v-if="show">
<div class="name">name</div>
<div>box 1</div>
<div>box 2</div>
</template>
v-show
v-show
同v-if
的效果是一样的,但是有所不同的是v-show
知识改变的元素的display
属性隐藏了元素,v-if
是真实的把元素干掉了。v-show
不支持在<template>
上使用
作者介绍
X
XiaoSong
V1