Vue App.vue中隱藏組件可以通過v-show或v-if指令來實現。v-show是將組件在頁面中顯示為style="display:none;",v-if是將組件直接刪除后再重新渲染。兩種方式的區別在于v-show仍然存在于DOM中,只是樣式被隱藏了,而v-if則是完全刪除了組件。
<template>
<div>
<button v-on:click="toggle">Toggle</button>
<div v-if="show">This is the div shown with v-if</div>
<div v-show="!show">This is the div shown with v-show</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
上述代碼實現了一個簡單的按鈕切換顯示/隱藏兩個div的效果。其中v-if控制的那個div在隱藏后并不再存在于DOM中,而v-show控制的那個div依然存在于DOM中但是通過樣式被隱藏了。
需要注意的是,如果需要頻繁切換顯示/隱藏狀態,建議使用v-show替代v-if,因為v-if每次狀態切換都需要重新渲染組件。
下一篇c ef json寫入