vue中v-if失效原因及解决方法
作者：i s s a
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下
一般v-if失效都是和绑定变量有关，我所知道的一般有两种
1.绑定的变量为String类型或者其他类型
就是返回的变量类型与所需要的布尔类型不匹配。
<template>
<div>
<div id="container" ref="container" v-if='type'></div>
</div>
</template>
<script setup lang="ts">
const type=ref('false')
</script>就像这种，我们得到的type的值是"false"而不是false,两者之间类型不同。如果不确定变量类型，就用typeof去打印。
2.两个相似的组件，v-if无法就行判断
对于两个很相似的组件，不管自定义还是还是本身的，如果只是用v-if那可能会造成失效
<template>
<div>
<el-button v-if='type'></el-button>
<el-button v-if='！type'></el-button>
</div>
</template>
<script setup lang="ts">
const type=ref(false)
</script>就像这样的，但是我们可以通过添加key值去区分。
<template>
<div>
<el-button v-if='type' key=1></el-button>
<el-button v-if='！type' key=2></el-button>
</div>
</template>
<script setup lang="ts">
const type=ref(false)
</script>这样就可以生效了。
到此这篇关于vue中v-if失效原因及解决方法的文章就介绍到这了,更多相关vue v-if失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！