vue中v-if失效原因及解決方法
一般v-if失效都是和綁定變量有關(guān)，我所知道的一般有兩種
1.綁定的變量為String類(lèi)型或者其他類(lèi)型
就是返回的變量類(lèi)型與所需要的布爾類(lèi)型不匹配。
<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,兩者之間類(lèi)型不同。如果不確定變量類(lèi)型，就用typeof去打印。
2.兩個(gè)相似的組件，v-if無(wú)法就行判斷
對(duì)于兩個(gè)很相似的組件，不管自定義還是還是本身的，如果只是用v-if那可能會(huì)造成失效
<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>就像這樣的，但是我們可以通過(guò)添加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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別
這篇文章主要介紹了簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue組件實(shí)例間的直接訪(fǎng)問(wèn)實(shí)現(xiàn)代碼
在組件實(shí)例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪(fǎng)問(wèn),需要的朋友可以參考下2017-08-08
Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶(hù)都說(shuō)還跟之前的一樣,一查原因是因?yàn)榭蛻?hù)沒(méi)有清空瀏覽器的緩存,所以為了方便客戶(hù)看到最新版本,開(kāi)始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題的解決辦法,需要的朋友可以參考下2024-02-02
Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程
這篇文章主要介紹了Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程,使用 Vite+Ts 開(kāi)發(fā)的是 Vue3 組件庫(kù),所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫(kù)樣式的管理，需要的朋友可以參考下2023-03-03
vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問(wèn)題小結(jié)
這篇文章主要介紹了vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問(wèn)題小結(jié),需要的朋友可以參考下2018-03-03
詳解vue中$nextTick和$forceUpdate的用法
這篇文章主要介紹了詳解vue中$nextTick和$forceUpdate的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue使用mind-map實(shí)現(xiàn)在線(xiàn)思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫(kù),它可以幫助開(kāi)發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶(hù)可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線(xiàn)思維導(dǎo)圖,需要的朋友可以參考下2024-07-07