v-show 和 v-if 簡(jiǎn)介：
1. v-show
??? 語(yǔ)法:? v-show="布爾值"??? (true顯示, false隱藏)
??? 原理:? 實(shí)質(zhì)是在控制元素的 css 樣式,? `display: none;`
2. v-if??
??? 語(yǔ)法: v-if="布爾值"?? (true顯示, false隱藏)
??? 原理:? 實(shí)質(zhì)是在動(dòng)態(tài)的創(chuàng)建 或者 刪除元素節(jié)點(diǎn)
應(yīng)用場(chǎng)景:
???????? 1. 如果是頻繁的切換顯示隱藏, 用 v-show??
???????????? (v-show, 只是控制css樣式，而v-if, 頻繁切換會(huì)大量的創(chuàng)建和刪除元素, 消耗性能)
???????? 2. 如果是不用頻繁切換, 要么顯示, 要么隱藏的情況, 適合于用 v-if
???????????? (v-if 是惰性的, 如果初始值為 false, 那么這些元素就直接不創(chuàng)建了, 節(jié)省一些初始渲染開(kāi)銷(xiāo))
<template>
<div>
<!-- 控制元素的 css 樣式,? display: none -->
<h1 v-show="showContent">hello world</h1>
<!-- 動(dòng)態(tài)刪除元素節(jié)點(diǎn) -->
<h1 v-if="showContent">hello world</h1>
</div>
</template>
<script>
export default {
// data中聲明的變量
data() {
return {
showContent: false,
}
}
}
</script>
<style>
</style>若多個(gè)條件，采用v-if和v-else-if和v-else來(lái)控制要顯示隱藏的內(nèi)容
<template>
<div>
<!-- 多個(gè)條件，采用v-if和v-else-if和v-else -->
<!-- 多個(gè)條件之間，不能插入別的標(biāo)簽 -->
<h1>去社區(qū)送禮品</h1>
<p>不同年齡段，送不同的禮品</p>
<p v-if="age < 18">小朋友：棒棒糖</p>
<p v-else-if="age < 50">青年：快樂(lè)水</p>
<p v-else-if="age < 60">中年：假發(fā)</p>
<p v-else>老年：腦白金</p>
<p>年齡：{{ age }}</p>
<button @click="age += 10">長(zhǎng)大10歲</button>
</div>
</template>
<script>
export default {
data() {
return {
age: 8,
};
}
}
</script>
<style>
</style>?小案例：
需求：點(diǎn)擊按鈕button變量count值自增，當(dāng)count大于3，顯示內(nèi)容“恭喜你晉級(jí)了”文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-494461.html
<template>
<div>
<p v-show="showWorld">hello world</p>
<p v-if="showWorld">hello world</p>
<button @click="showWorld = !showWorld">顯示/隱藏世界</button>
<h1>{{ count }}</h1>
<!-- 當(dāng)count大于3，顯示恭喜你晉級(jí)了 -->
<p v-show="count > 3">恭喜你，晉級(jí)了！</p>
<button @click="count++">升級(jí)</button>
<!-- 根據(jù)年齡，顯示不同文案 -->
<!-- 小于18 -->
<h1 v-if="age < 18">少年</h1>
<!-- 18 - 30 -->
<h1 v-else-if="age < 30">青年</h1>
<!-- 30 - 60 -->
<h1 v-else-if="age < 60">中年</h1>
<!-- 大于 60 -->
<h1 v-else>老年</h1>
<h1>年齡：{{ age }}</h1>
<button @click="age += 10">長(zhǎng)大10歲</button>
</div>
</template>
<script>
export default {
data() {
return {
showWorld: true,
count: 0,
age: 8,
}
}
}
</script>
<style>
</style>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-494461.html
到了這里，關(guān)于vue: v-show 和 v-if 指令控制盒子的顯示隱藏的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學(xué)習(xí)筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過(guò)濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
