快捷導(dǎo)航

Vue的條件判斷問(wèn)題及說(shuō)明

更新時(shí)間：2026年05月18日 16:59:11 作者：落雪小軒韓

文章主要介紹了Vue中的v-if、v-else-if和v-else的等這三種指令的使用方法和場(chǎng)景,還對(duì)比了v-if和v-show的區(qū)別,并提供了實(shí)際開(kāi)發(fā)中選擇v-if或v-show的的建議

Vue的條件判斷

?1.vue的條件判斷：

v-if、v-else-if、v-else，這三個(gè)指令與JS的條件語(yǔ)句if、else、else if類似。
Vue的條件指令可以根據(jù)表達(dá)式的值在DOM中渲染或銷毀元素或組件。

2.指令v-if：可以用v-if指令的條件(判斷)值來(lái)決定DOM的元素是否渲染出來(lái)；

3.使用方法：v-if="表達(dá)式"

<div id="app">
    <!-- 條件為true時(shí)，將message渲染出來(lái)，條件為false時(shí)，不渲染出來(lái) -->
	<h2 v-if="true">{{message}}</h2>
	<h2 v-if="false">{{message}}</h2>
	<!-- 用data中的自定義數(shù)據(jù)show作為條件，則可以動(dòng)態(tài)修改條件 -->
	<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好??！',
        isShow: true
    }
})
</script>

v-if和v-else的結(jié)合使用

?v-if：當(dāng)表達(dá)式條件滿足時(shí)，顯示該指令元素里面的內(nèi)容；
v-else : 否則表達(dá)式條件不滿足，顯示該指令元素里面的內(nèi)容；

注意：

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。

<div id="app">
	<h2 v-if="isShow">{{message}}</h2>
	<h1 v-else>isShow為false時(shí)顯示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好??！',
        isShow: true
    }
})
</script>

v-if、v-else和v-else-if的結(jié)合使用

?v-if：條件滿足，顯示該元素里面的內(nèi)容。
v-else-if：若v-if中條件不滿足，則看v-else-if中條件是否滿足，滿足則顯示該元素里面的內(nèi)容。類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。
v-else：若都不滿足，則改元素中內(nèi)容。

<div id="app">
	<h2 v-if="score>=90">優(yōu)秀</h2>
	<h2 v-else-if="score>=80">良好</h2>
	<h2 v-else-if="score>=60">及格</h2>
	<h2 v-else>不及格</h2>
	
	 <!-- 	邏輯較多時(shí)，可以直接用計(jì)算屬性來(lái)做 -->
	<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
	el: "#app",
	data: {
	    score: 99
	},
	computed: {
	    result() {
	        let showMessage = ''
	        if (this.score >= 90) {
	            showMessage = '優(yōu)秀'
	        } else if (this.score >= 80) {
	            showMessage = '良好'
	        } else if (this.score >= 60) {
	            showMessage = '及格'
	        } else {
	            showMessage = '不及格'
	        }
	        return showMessage
	   }
	}
})
</script>

用戶登錄切換的小案例

<div id="app">
	<span v-if="isUser">
		<label for="username">用戶賬號(hào)</label>
		<input type="text" id="username" placeholder="用戶賬號(hào)" key="username">
	</span>
	<span v-else>
		<label for="email">用戶郵箱</label>
		<input type="text" id="email" placeholder="用戶郵箱" key="email">
	</span>
	<button @click="isUser=!isUser">切換類型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
	el: "#app",
	data: {
	    isUser: true
	}
})
</script>

?問(wèn)題：

如果我們?cè)谟休斎雰?nèi)容的情況下切換了類型，我們會(huì)發(fā)現(xiàn)文字依然顯示之前的輸入的內(nèi)容。
但是按道理講，我們應(yīng)該切換到另外一個(gè)input元素中了，
在另一個(gè)input元素中，我們并沒(méi)有輸入內(nèi)容。

為什么會(huì)出現(xiàn)這個(gè)問(wèn)題呢？

這是因?yàn)閂ue在進(jìn)行DOM渲染時(shí)，出于性能考慮，會(huì)會(huì)盡可能高效地渲染元素，
通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染
也就是說(shuō)： Vue內(nèi)部會(huì)發(fā)現(xiàn)原來(lái)的input元素不再使用，直接作為else中的input來(lái)使用了

解決方案：

如果我們不希望Vue出現(xiàn)類似重復(fù)利用的問(wèn)題，就要通過(guò)方式來(lái)表達(dá)這兩個(gè)元素是完全獨(dú)立的，
不要復(fù)用它們可以給對(duì)應(yīng)的input添加key屬性
并且我們需要保證不同input中key屬性的屬性值不同，這樣就不會(huì)被復(fù)用，而是重新創(chuàng)建。

v-show的使用

?1.v-show的使用：

v-show的用法和v-if非常相似，都是決定一個(gè)元素是否渲染：

2.v-if和v-show對(duì)比：

*當(dāng)條件為true時(shí)：

v-if和v-show都可以將元素渲染，顯示出來(lái)。

*當(dāng)條件為false時(shí)：

v-if不會(huì)顯示元素，原因：包含v-if指令的元素根本不會(huì)存在DOM中
v-show不會(huì)顯示元素，原因：因?yàn)樗o該元素設(shè)置了一個(gè)行內(nèi)樣式 display：none
但它始終會(huì)被渲染并保留在 DOM 中
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。
它也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。
v-show 就簡(jiǎn)單得多，不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

3.開(kāi)發(fā)中選擇用v-show還是v-if？

當(dāng)需要在顯示與隱藏之間切換很頻繁時(shí)，使用v-show

當(dāng)只有一次切換時(shí)，使用v-if

 <div id="app">
	<h2 v-if="isShow" id="aaa">{{message}}</h2>
	<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好?。?,
            isShow: true
        }
    })
</script>