vue常用指令 v-show
1.v-show
- <strong>v-show指令</strong> 也是條件渲染指令，不同的是有 v-show 的元素會(huì)始終渲染并保持在 DOM 中。
- 和v-if指令不同點(diǎn)在于：v-show是根據(jù)表達(dá)式之真假值，切換元素的 display CSS 屬性，當(dāng)條件變化時(shí)該指令觸發(fā)過(guò)渡效果。
<body>
<!--
v-show 根據(jù)條件判斷元素是否顯示, 無(wú)論是否顯示元素,元素都始終渲染并保存到dom中
-->
<div id="app">
<p v-show="show">顯示出來(lái)!!!</p>
<p v-show="hide">不要顯示!!!</p>
<p v-show="height>1.7">身高:{{height}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true,
hide:false,
height:1.89
}
})
</script>
- v-show和v-if的區(qū)別：
- v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件； v-show 則只是簡(jiǎn)單地基于 CSS 切換。
- v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。
2.v-else
- <strong>v-else指令</strong> 可以用v-else指令為v-if或v-show添加一個(gè)“else塊”。
注意：v-else前一兄弟元素必須有 v-if 或 v-else-if。
<body>
<!-- v-else 為v-if或v-show添加一個(gè)else塊 -->
<div id="app">
<!--只有一個(gè)符合條件,顯示-->
<p v-if="show">{{message}}</p>
<p v-else>{{word}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'如果咸魚(yú)也有夢(mèng)想',
word:'萬(wàn)一實(shí)現(xiàn)了呢',
show:false
}
})
</script>
3.v-else-if
<body>
<!-- v-else-if -->
<div id="app">
<p v-if="score>80">優(yōu)秀</p>
<p v-else-if="score>70">良好</p>
<p v-else-if="score>60">及格</p>
<p v-else>不及格</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
score:75 //根據(jù)分?jǐn)?shù), 顯示優(yōu)秀, 良好, 及格, 不及格
}
})
</script>
