Vue v-show 指令
示例
使用 v-show 指令根據 'showDiv' 的值有條件地切換 <div> 元素的可見性。
<div v-show="showDiv">這個 div 標籤可以被隱藏</div>
自己動手試一試 »
更多示例請參見下方。
定義和用法
v-show 指令用於有條件地切換元素的可見性。
當 v-show 使用的表示式求值為 'false' 時，CSS display 屬性被設定為 'none'，否則 CSS display 屬性會回退到預設值。
帶有 v-show 的元素被建立一次並保留在 DOM 中，只有它的可見性透過 v-show 來切換。
當與內建的 <Transition> 元件一起使用時，v-show 會觸發過渡類和事件。
像 mounted/unmounted，或 activated/deactivated 這樣的生命週期鉤子，當使用 v-show 切換物件的可見性時，**不會**被觸發。
v-show vs. v-if
v-show 和 v-if 指令看起來很相似，因為它們都可以切換元素的顯示或隱藏，但它們之間存在一些區別。
v-show |
v-if |
|
|---|---|---|
| 切換時會在 DOM 中建立和銷燬元素嗎？ | no | 是 |
切換元素時會觸發 mounted/unmounted 生命週期鉤子嗎？ |
no | 是 |
當與內建的 <Transition> 元件一起使用時，會觸發離開和進入的過渡事件和類嗎？ |
是 | 是 |
與內建的 <template> 元素一起使用嗎？ |
no | 是 |
與 v-else-if 和 v-else 一起使用嗎？ |
no | 是 |
更多示例
示例
v-show 和 v-if 指令並排使用，以有條件地切換 <div> 元素的可見性。
開啟示例，將條件設定為 'false'，然後右鍵單擊並檢查頁面，以檢視帶有 v-show 的元素仍然存在於 DOM 中。
<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>
自己動手試一試 »
示例
一個 <p> 元素會隨著 v-show 變得可見，並觸發 after-enter 事件。
<template>
<h1>JavaScript Transition Hooks</h1>
<p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p>
<button @click="pVisible=true">Create p-tag!</button><br>
<Transition @after-enter="onAfterEnter">
<p v-show="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
}
},
methods: {
onAfterEnter() {
this.divVisible = true;
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
相關頁面
Vue 教程: Vue v-show 指令
Vue 教程：Vue v-if 指令
Vue 教程: Vue 動畫
Vue 參考: Vue <Transition> 元件
Vue 參考：Vue v-if 指令
