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 小时前
Python之面向对象和类
java·开发语言
qq_529835351 小时前
ThreadLocal内存泄漏 强引用vs弱引用
java·开发语言·jvm
景彡先生1 小时前
C++并行计算:OpenMP与MPI全解析
开发语言·c++
LuciferHuang2 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing2 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20152 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
量子联盟3 小时前
原创-基于 PHP 和 MySQL 的证书管理系统,免费开源
开发语言·mysql·php
姑苏洛言3 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手4 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言4 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端