Showing posts with label Vue.js. Show all posts
Showing posts with label Vue.js. Show all posts

Saturday, September 25, 2021

Vue.js 指令(Directives)

 

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-showfalse時的消失,實際觀察 DOM 會發現該元素只是被加上了行內樣式 style="display:none"而已,並沒有從DOM上消失

v-for