v-if失效原因

一般v-if失效都是和绑定变量有关,我所知道的一般有两种

1.绑定的变量为String类型或者其他类型

就是返回的变量类型与所需要的布尔类型不匹配。

html 复制代码
<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那可能会造成失效

html 复制代码
<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值去区分。

html 复制代码
<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>

这样就可以生效了。

相关推荐
三思而后行,慎承诺10 分钟前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手13 分钟前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰22 分钟前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh011324 分钟前
LRU 缓存
开发语言·前端·javascript
空山新雨(大队长)1 小时前
Java第五课:输入输出
java·开发语言
yangzhi_emo1 小时前
ES6笔记5
前端·笔记·es6
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...2 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See2 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js