当前位置：首页 > VUE

vue 实现vshow

2026-03-07 13:44:01VUE

Vue 实现 v-show 的方法

在 Vue 中，v-show 是一个常用的指令，用于根据条件显示或隐藏元素。与 v-if 不同，v-show 通过 CSS 的 display 属性控制元素的可见性，而不会移除 DOM 元素。

基本用法

v-show 的语法非常简单，直接绑定一个布尔值或表达式。当值为 true 时，元素显示；当值为 false 时，元素隐藏。

vue 实现vshow

<template>
  <div>
    <p v-show="isVisible">这段文字会根据 isVisible 的值显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

动态切换显示状态

可以通过方法或用户交互动态切换 v-show 的状态。例如，通过按钮点击切换显示状态：

vue 实现vshow

<template>
  <div>
    <p v-show="isVisible">点击按钮切换我的可见性</p>
    <button @click="toggleVisibility">切换显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

与 v-if 的区别

v-show 和 v-if 都可以控制元素的显示与隐藏，但两者有以下区别：

v-show 通过 CSS 的 display: none 隐藏元素，DOM 元素始终存在。
v-if 会根据条件动态添加或移除 DOM 元素，性能开销较大。

<template>
  <div>
    <p v-show="showWithVShow">使用 v-show 控制</p>
    <p v-if="showWithVIf">使用 v-if 控制</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showWithVShow: true,
      showWithVIf: true
    }
  }
}
</script>

结合计算属性使用

v-show 可以结合计算属性实现更复杂的逻辑。例如，根据多个条件决定是否显示元素：

<template>
  <div>
    <p v-show="shouldShow">根据多个条件决定是否显示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true,
      hasPermission: true
    }
  },
  computed: {
    shouldShow() {
      return this.isLoggedIn && this.hasPermission
    }
  }
}
</script>