Vue v-show 指令

示例

使用v-show有条件地切换可见性的指令<div>元素，取决于“showDiv”的值。

<div v-show="showDiv">This div tag can be hidden</div>

亲自试一试 »

请参阅下面的更多示例。

定义和用法

这个v-show指令用于有条件地切换元素的可见性。

当表达式使用v-show评估结果为“假”，CSSdisplay属性设置为“none”，否则 CSSdisplay属性回落到默认值。

一个元素与v-show被挂载一次并保留在 DOM 中，仅其可见性通过切换v-show。

v-show与内置函数一起使用时触发转换类和事件<Transition>成分。

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

v-show 与 v-if

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

	`v-show`	`v-if`
Creates and destroys an element in the DOM when it is toggled?	no	yes
Triggers lifecycle hooks `mounted`/`unmounted` when an element is toggled?	no	yes
Triggers transition events and classes for leaving and entering when used with the built-in `<Transition>` component?	yes	yes
Works with the built-in `<template>` element?	no	yes
Works with `v-else-if` and `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>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue v-show 指令

示例

定义和用法

v-show 与 v-if

更多示例

示例

示例

相关页面