Vue v-show 指令
在下面查看更多示例。
定义和用法
v-show 指令用于有条件地切换元素的可见性。
当 v-show 使用的表达式计算结果为 'false' 时，CSS display 属性将设置为 'none'，否则 CSS display 属性将恢复为默认值。
带有 v-show 的元素只会被挂载一次并保留在 DOM 中，只有它的可见性会被 v-show 切换。
v-show 在与内置的 <Transition> 组件一起使用时会触发过渡类和事件。
当使用 v-show 切换对象的可见性时，不会 触发诸如 mounted/unmounted 或 activated/deactivated 这样的生命周期钩子。
v-show vs. v-if
v-show 和 v-if 指令表面上非常相似，因为它们都可以切换元素使其显示或隐藏，但它们之间存在一些区别
v-show |
v-if |
|
|---|---|---|
| 在切换时会在 DOM 中创建和销毁元素吗？ | 不会 | 会 |
在切换元素时会触发生命周期钩子 mounted/unmounted 吗？ |
不会 | 会 |
在与内置的 <Transition> 组件一起使用时会触发离开和进入的过渡事件和类吗？ |
会 | 会 |
与内置的 <template> 元素一起使用吗？ |
不会 | 会 |
与 v-else-if 和 v-else 一起使用吗？ |
不会 | 会 |
更多示例
示例
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 指令
