快捷導(dǎo)航

vue中v-if失效原因及解決方法

更新時間：2023年09月18日 10:37:25 作者：i s s a

本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下

1.綁定的變量為String類型或者其他類型

就是返回的變量類型與所需要的布爾類型不匹配。

<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那可能會造成失效

<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值去區(qū)分。

<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>

這樣就可以生效了。

到此這篇關(guān)于vue中v-if失效原因及解決方法的文章就介紹到這了,更多相關(guān)vue v-if失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Element Backtop回到頂部的具體使用
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue移動端如何解決click事件延遲,封裝tap等事件
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue?router應(yīng)用問題實戰(zhàn)記錄
vue-router是vue.js官方的路由插件,他和vue.js是深度集成的適合構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue?router應(yīng)用問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
詳解Vue中是如何實現(xiàn)cache緩存的
這篇文章分享一個比較有意思的東西，那就是Vue中如何實現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07
Vue?uni-app以H5模式引入Jquery配置教程
這篇文章主要為大家介紹了Vue?uni-app以H5模式引入Jquery配置教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能,基于一個新建的Vue3項目上實現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-01-01
Vue多布局模式實現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實現(xiàn)方法，多布局模式可以根據(jù)用戶角色所在場景切換頁面布局，是非常常見的基礎(chǔ)功能，感興趣的同學(xué)可以參考下文
2023-05-05
vuejs父子組件通信的問題
本篇文章主要介紹了vue父子組件通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
Vue.js實現(xiàn)一個todo-list的上移下移刪除功能
這篇文章主要介紹了Vue.js實現(xiàn)一個todo-list的上移下移刪除功能,需要的朋友可以參考下
2017-06-06