# 在template中使用v-show的问题

今天在开发的过程中,在template的属性中使用了v-show,但是发现v-show不起作用,后来发现是template中不能使用v-show,只能使用v-if,原因如下:

# 原因

因为 v-show 是通过 display 来控制标签进行渲染的,但是 template 标签在 vue 解析后是不会显示在页面上的 ,是虚拟 Dom,所以无法使用 v-show,但是 v-if 是可以使用在 template 标签上,因为 v-if 是条件渲染,只要满足 v-if 后的条件就可以完成渲染。

<template v-if="addType === 0">
    <el-input type="textarea"></el-input>
</template>
<template v-show="addType === 1">
    <el-select></el-select>
</template>
<template v-show="addType === 2">
    <el-select></el-select>
</template>