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>

这样就可以生效了。

相关推荐
weixin_472339465 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击5 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue7 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762907 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博