溫故
上一節(jié)：零基礎(chǔ)入門Vue之皇帝的新衣——樣式綁定
在前面的內(nèi)容能了解到，Vue不僅僅能進(jìn)行數(shù)據(jù)渲染還可以對樣式進(jìn)行綁定
并且他能隨意的切換樣式，但Vue的初衷就是盡量少讓使用者操作dom節(jié)點(diǎn)
加入你要讓指定dom顯示或者不顯示，該怎么辦呢？以目前的東西來說，不拿到dom節(jié)點(diǎn)還是做不到的
因此，Vue提供了另外的辦法去解決它：條件渲染
- v-if
- v-show
條件渲染之v-if
v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
從官網(wǎng)上看，這個(gè)v-if指令理解起來也不難，就是說，想要顯示就
<div v-if="true"></div>
不想顯示就
<div v-if="false"></div>
v-if的基本用法
可以根據(jù)前面提到的原理，用一個(gè)變量去控制，畢竟雙引號里面可以寫js表達(dá)式
基于這個(gè)原理，實(shí)現(xiàn)一個(gè)點(diǎn)擊按鈕顯示文字，再點(diǎn)擊文字消失，再點(diǎn)擊顯示以此類推的效果
v-else與v-else-if
眾所周知，在變成語言里面分支是依賴于if-else或者是if-else-if來控制的（switch、三目暫且不論）
Vue也提供了這一種方式，允許根據(jù)一定條件下來控制多個(gè)dom節(jié)點(diǎn)的顯示或不顯示
PS：如果要使用這種辦法，dom節(jié)點(diǎn)必須連在一起不能拓展 且 當(dāng)條件為false的時(shí)候這個(gè)dom會被刪除，但為true的時(shí)候會添加進(jìn)去
請看如下例子：利用Vue的條件渲染，實(shí)現(xiàn)判斷密碼是否輸入錯(cuò)誤、輸入為空、輸入正確，并且給出提示
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="password" v-model="pwd" placeholder="enter you pwd."><br/>
<span v-if="pwd==''">密碼不能為空</span>
<span v-else-if="pwd!=='123456'">密碼錯(cuò)誤</span>
<span v-else >密碼正確</span>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
pwd:""
},
})
</script>
</html>
條件渲染之v-show
v-show與v-if不同，v-show是直接讓節(jié)點(diǎn)不顯示，但并不是刪除
并且v-show沒有其他的else，他就只有一個(gè)true顯示false不顯示
看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<span v-show="show">Hello world</span><br/>
<button @click="show=!show">點(diǎn)我顯示文字</button>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
show:false
},
})
</script>
</html>
我比較懶，直接搬了v-if的基本使用的代碼，v-show的用法只有這一點(diǎn)，其他的也無非是在""里面寫變量去控制顯示不顯示
打開瀏覽器的開發(fā)者調(diào)試工具可以看到當(dāng)show為false時(shí)這個(gè)節(jié)點(diǎn)存在但他被隱藏了，但v-if是直接刪除
ps：v-show比較適用于變動比較頻繁的場合，變動不需要渲染很多東西文章來源：http://www.zghlxwxcb.cn/news/detail-825138.html
The End
下一篇：零基礎(chǔ)入門Vue之影分身之術(shù)——列表渲染&渲染原理淺析文章來源地址http://www.zghlxwxcb.cn/news/detail-825138.html
到了這里，關(guān)于零基礎(chǔ)入門Vue之To be or not to be——條件渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![ES 創(chuàng)建太多 buckets 錯(cuò)誤： trying to create too many buckets. must be less than or equal to: [100000] but w](https://imgs.yssmx.com/Uploads/2024/02/471211-1.png)
