X

XiaoSong

V1

2023/01/25阅读:18主题:默认主题

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-elsev-else-if 也可以在 <template> 上使用。

<template v-if="show">
  <div class="name">name</div>
  <div>box 1</div>
  <div>box 2</div>
</template>

v-show

v-showv-if的效果是一样的,但是有所不同的是v-show知识改变的元素的display属性隐藏了元素,v-if是真实的把元素干掉了。v-show不支持在<template>上使用

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1