vue 实现vshow

Vue 实现 v-show

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

基本用法

v-show 接收一个布尔值，当值为 true 时显示元素，为 false 时隐藏元素。以下是一个简单的示例：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <p v-show="isVisible">这段文字会根据条件显示或隐藏</p>
  </div>
</template>

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

与 v-if 的区别

• v-show 通过 CSS 的 display: none 隐藏元素，DOM 仍然存在。
• v-if 会根据条件动态添加或移除 DOM 元素，适合频繁切换的场景性能较差。

动态绑定

v-show 可以绑定动态表达式，例如：

<template>
  <div>
    <p v-show="user.age >= 18">成年人内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        age: 20
      }
    };
  }
};
</script>

结合计算属性

可以使用计算属性动态控制 v-show 的显示逻辑：

<template>
  <div>
    <p v-show="isAdult">成年人内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        age: 20
      }
    };
  },
  computed: {
    isAdult() {
      return this.user.age >= 18;
    }
  }
};
</script>

性能优化

由于 v-show 只是切换 CSS 属性，适合频繁切换的场景。如果需要初始渲染时条件为假且不占用 DOM，可以使用 v-if。

注意事项

• v-show 不支持 <template> 标签。
• 如果条件逻辑复杂，建议使用计算属性或方法封装。