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>

这样就可以生效了。

相关推荐
Java水解4 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
chao_78921 分钟前
回溯题解——子集【LeetCode】二进制枚举法
开发语言·数据结构·python·算法·leetcode
用户38022585982425 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210027 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员33 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手33 分钟前
js高级程序设计(日期)
javascript
Web小助手34 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_35 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价36 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
流口水的兔子36 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序