v-if
透過v-if指令,當v-if後的條件為true時,該元素就會顯示在 DOM 上,若false則該元素不會顯示在 DOM 的結構上。
範例:
<div id='app'>
<div v-if='text1'>最後這段文字會顯示</div>
<div v-if='text2'>最後這段文字不會顯示</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
text1:true,
text2:false
}
})
</script>
v-show
和上面的v-if很像,但v-show在false時的消失,實際觀察 DOM 會發現該元素只是被加上了行內樣式 style="display:none"而已,並沒有從DOM上消失。