Vue v-show 指令
瞭解如何使用 v-show 使元素可見或不可見。
v-show 易於使用，因為條件直接寫在 HTML 標籤的屬性中。
條件可見性
當條件為 'false' 時，v-show 指令透過將 CSS 'display' 屬性值設定為 'none' 來隱藏元素。
在將 v-show 編寫為 HTML 屬性後，我們必須提供一個條件來決定是否顯示該標籤。
語法
<div v-show="showDiv">這個 div 標籤可以隱藏</div>
在上面的程式碼中，'showDiv' 代表一個布林值的 Vue 資料屬性，其屬性值可以是 'true' 或 'false'。如果 'showDiv' 是 'true'，則顯示 div 標籤，如果它是 'false'，則不顯示該標籤。
示例
僅當 showDiv 屬性設定為 'true' 時顯示 <div> 元素。
<div id="app">
<div v-show="showDiv">這個 div 標籤可以隱藏</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
v-show 與 v-if 對比
v-show 和 v-if 的區別在於，v-if 根據條件建立（渲染）元素，但使用 v-show 時，元素已建立，v-show 只改變其可見性。
因此，當切換物件的可見性時，最好使用 v-show，因為它對瀏覽器來說更容易處理，並且可以帶來更快的響應和更好的使用者體驗。
使用 v-if 而不是 v-show 的一個原因是，v-if 可以與 v-else-if 和 v-else 一起使用。
在下面的示例中，v-show 和 v-if 分別應用於兩個不同的 <div> 元素，但基於相同的 Vue 屬性。您可以開啟示例並檢查程式碼，以看到 v-show 保留了 <div> 元素，僅將 CSS display 屬性設定為 'none'，而 v-if 實際上銷燬了 <div> 元素。
示例
僅當 showDiv 屬性設定為 'true' 時顯示兩個 <div> 元素。如果 showDiv 屬性設定為 'false'，並且我們使用瀏覽器檢查示例頁面，我們可以看到帶有 v-if 的 <div> 元素被銷燬了，而帶有 v-show 的 <div> 元素則只是將 CSS display 屬性設定為 'none'。
<div id="app">
<div v-show="showDiv">帶有 v-show 的 Div 標籤</div>
<div v-if="showDiv">帶有 v-if 的 Div 標籤</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
