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 指令
