Vue的條件判斷問題及說明

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

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

Vue的條件判斷

?1.vue的條件判斷：

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

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

3.使用方法：v-if="表達式"

<div id="app">
    <!-- 條件為true時，將message渲染出來，條件為false時，不渲染出來 -->
	<h2 v-if="true">{{message}}</h2>
	<h2 v-if="false">{{message}}</h2>
	<!-- 用data中的自定義數據show作為條件，則可以動態(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的結合使用

?v-if：當表達式條件滿足時，顯示該指令元素里面的內容；
v-else : 否則表達式條件不滿足，顯示該指令元素里面的內容；

注意：

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

<div id="app">
	<h2 v-if="isShow">{{message}}</h2>
	<h1 v-else>isShow為false時顯示我</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的結合使用

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

<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>
	
	 <!-- 	邏輯較多時，可以直接用計算屬性來做 -->
	<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">用戶賬號</label>
		<input type="text" id="username" placeholder="用戶賬號" 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>

?問題：

如果我們在有輸入內容的情況下切換了類型，我們會發(fā)現文字依然顯示之前的輸入的內容。
但是按道理講，我們應該切換到另外一個input元素中了，
在另一個input元素中，我們并沒有輸入內容。

為什么會出現這個問題呢？

這是因為Vue在進行DOM渲染時，出于性能考慮，會會盡可能高效地渲染元素，
通常會復用已有元素而不是從頭開始渲染
也就是說： Vue內部會發(fā)現原來的input元素不再使用，直接作為else中的input來使用了

解決方案：

如果我們不希望Vue出現類似重復利用的問題，就要通過方式來表達這兩個元素是完全獨立的，
不要復用它們可以給對應的input添加key屬性
并且我們需要保證不同input中key屬性的屬性值不同，這樣就不會被復用，而是重新創(chuàng)建。

v-show的使用

?1.v-show的使用：

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

2.v-if和v-show對比：

*當條件為true時：

v-if和v-show都可以將元素渲染，顯示出來。

*當條件為false時：

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

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

當需要在顯示與隱藏之間切換很頻繁時，使用v-show

當只有一次切換時，使用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>