v-if條件判斷

<span v-if=”score < 60”> 不及格 </span>

<span v-else-if=”score >= 60 && score < 80”> 良好 </span>

<span v-else”> 優(yōu)秀 </span>

<span v-if=”age >= 25”>Age: {{ age }}</span>

<span v-if=”name.indexOf('Amy') >= 0”>{{ name }}</span>

1. 單獨(dú)使用v-if，變量為布爾值，為true才渲染Dom

2. v-if、v-else、v-else-if聯(lián)合使用相當(dāng)于if、elseif、else，但是在條件比較多的時(shí)候建議使用計(jì)算屬性。

案例分析

<template><div><h2 align="center">if語(yǔ)句的使用方法講解</h2><br><h3 align="left"><pre>v-if是條件渲染指令，它根據(jù)表達(dá)式的真假來(lái)刪除和插入元素，它的基本語(yǔ)法如下：v-if = “expression”expression是一個(gè)返回bool值的表達(dá)式，表達(dá)式可以是一個(gè)bool屬性，也可以是一個(gè)返回bool的運(yùn)算式</pre></h3><!--v-if是條件語(yǔ)句，可以放在html標(biāo)簽內(nèi)部使用v-if只能出現(xiàn)一次v-else-if可以出現(xiàn)多次，也可以沒(méi)有v-else最多只能出現(xiàn)一次，也可以沒(méi)有，v-else后面不允許出現(xiàn)條件語(yǔ)句--><span v-if="score>=90">你的分?jǐn)?shù)是{{score}},成績(jī)優(yōu)秀非常棒！</span><span v-else-if="score>=80">你的分?jǐn)?shù)是{{score}},成績(jī)優(yōu)良</span><span v-else-if="score>=70">你的分?jǐn)?shù)是{{score}},成績(jī)一般</span><span v-else-if="score>=60">你的分?jǐn)?shù)是{{score}},及格</span><span v-else>你的分?jǐn)?shù)是{{score}}，繼續(xù)努力！</span><!--indexOf方法返回子串（Admin）在字符串(username)中的開(kāi)始位置--><p v-if="username.indexOf('Admin')>=0">{{username}}</p></div>
</template>
<script>export default({name: 'If',data(){return {score:90,username:'Administrator'}}
})
</script>

v-show條件渲染

<span v-show=”yes”>Vue.js</span>

<span v-show=”no”>NO!</span>

<span v-show=”age >= 25”>Age: {{ age }}</span>

<span v-show=”name.indexOf('Amy') >= 0”>{{ name }}</span>

案例分析

<template><div><h2 align="center">show語(yǔ)句的使用方法講解</h2><hr><h3 align="left"><pre>v-show也是條件渲染指令，與v-if不同的是它是通過(guò)設(shè)置元素的display屬性來(lái)控制元素的隱藏與顯示的，它的基本語(yǔ)法如下：v-show=”expression”expression是一個(gè)返回bool值的表達(dá)式，表達(dá)式可以是一個(gè)bool屬性，也可以是一個(gè)返回bool的運(yùn)算式</pre></h3><span v-show="yes">Vue.js</span><span v-show="no">NO</span><font v-show="age>=18">年齡{{age}}</font><br><span v-show="username.indexOf('Admin')>=0">{{username}}中包含Admin子串</span></div>
</template>
<script>export default({name: 'Show',data(){return {age:18,username:'Administrator'}}
})
</script>

v-show和v-if區(qū)別

一、v-show與v-if的共同點(diǎn)

我們都知道在 vue 中 v-show 與 v-if 的作用效果是相同的，都能控制元素在頁(yè)面是否顯示

在用法上也是相同的

<span v-if="score>=90">你的分?jǐn)?shù)是{{score}},成績(jī)優(yōu)秀非常棒！</span>
<font v-show="age>=18">年齡{{age}}</font><br>

• 當(dāng)表達(dá)式為true的時(shí)候，都會(huì)占據(jù)頁(yè)面的位置
• 當(dāng)表達(dá)式都為false時(shí)，都不會(huì)占據(jù)頁(yè)面位置

二、v-show與v-if的區(qū)別

• 控制手段不同
• 編譯過(guò)程不同
• 編譯條件不同

控制手段：v-show隱藏則是為該元素添加css--display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個(gè)添加或刪除

編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件；v-show只是簡(jiǎn)單的基于css切換

編譯條件：v-if是真正的條件渲染，它會(huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。只有渲染條件為假時(shí)，并不做操作，直到為真才渲染

• v-show 由false變?yōu)閠rue的時(shí)候不會(huì)觸發(fā)組件的生命周期
• v-if由false變?yōu)閠rue的時(shí)候，觸發(fā)組件的beforeCreate、create、beforeMount、mounted鉤子，由true變?yōu)閒alse的時(shí)候觸發(fā)組件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

三、v-show與v-if的使用場(chǎng)景

v-if 與 v-show 都能控制dom元素在頁(yè)面的顯示

v-if 相比 v-show 開(kāi)銷更大的（直接操作dom節(jié)點(diǎn)增加與刪除）

如果需要非常頻繁地切換，則使用 v-show 較好

如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好

本人從事軟件項(xiàng)目開(kāi)發(fā)20多年，2005年開(kāi)始從事Java工程師系列課程的教學(xué)工作，錄制50多門精品視頻課程，包含java基礎(chǔ)，jspweb開(kāi)發(fā)，SSH,SSM，SpringBoot，SpringCloud,人工智能，在線支付等眾多商業(yè)項(xiàng)目，每門課程都包含有項(xiàng)目實(shí)戰(zhàn)，上課PPT，及完整的源代碼下載，有興趣的朋友可以看看我的在線課堂

講師課堂鏈接：https://edu.csdn.net/lecturer/893