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>

这样就可以生效了。

相关推荐
钢门狂鸭1 小时前
关于rust的crates.io
开发语言·后端·rust
Lionel_SSL1 小时前
《深入理解Java虚拟机》第三章读书笔记:垃圾回收机制与内存管理
java·开发语言·jvm
技术猿188702783512 小时前
PHP 与 WebAssembly 的 “天然隔阂”
开发语言·php·wasm
薄荷撞~可乐2 小时前
C#Task(Api)应用
开发语言·c#
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊3 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
another heaven4 小时前
【Qt VS2022调试时无法查看QString等Qt变量信息】解决方法
开发语言·qt
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理5 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人5 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技