v-if失效原因

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

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

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

<template>
     <div>
       <div id="container" ref="container" v-if='type'>div>
    div>
template>
<script setup lang="ts">
  const type=ref('false')
script>
1
2
3
4
5
6
7
8

就像这种，我们得到的type的值是"false"而不是false,两者之间类型不同。如果不确定变量类型，就用typeof去打印。

2.两个相似的组件，v-if无法就行判断

    对于两个很相似的组件，不管自定义还是还是本身的，如果只是用v-if那可能会造成失效

<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>
1
2
3
4
5
6
7
8
9

就像这样的，但是我们可以通过添加key值去区分。

<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
2
3
4
5
6
7
8
9

这样就可以生效了。