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 切换。

v-show 与内置 <Transition> 组件一起使用时会触发过渡类和事件。

当使用 v-show 切换对象的可见性时，不会触发 mounted/unmounted 或 activated/deactivated 等生命周期钩子。

v-show 与 v-if

v-show 和 v-if 指令显然非常相似，因为它们都可以切换元素以使其显示或不显示，但这里有一些区别:

	`v-show`	`v-if`
在切换时创建和销毁 DOM 中的元素?	no	yes
当元素切换时触发生命周期钩子`mounted`/`unmounted`?	no	yes
与内置 `<Transition>` 组件一起使用时触发离开和进入的过渡事件和类?	yes	yes
可以与内置的 `<template>` 元素一起使用吗?	no	yes
适用于 `v-else-if` 和 `v-else` 吗?	no	yes

更多示例

示例

v-show 和 v-if 指令并排使用，有条件地切换 <div> 元素的可见性。

打开示例，将条件设置为"false"，然后右键单击并检查页面，可以看到带有 v-show 的元素仍然存在于 DOM 中。

<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</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>

运行示例 »