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>上使用