vue 实现vshow

Vue 中实现 v-show 功能

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

基本用法

v-show 接受一个布尔表达式，当值为 true 时显示元素，为 false 时隐藏元素。

<template>
  <div>
    <p v-show="isVisible">这段文字会根据 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 通过 CSS 控制显示/隐藏，适合频繁切换的场景。
• v-if 会动态添加或移除 DOM 元素，适合条件很少变化的场景。

自定义指令实现类似功能

如果需要自定义类似 v-show 的功能，可以通过 Vue 的自定义指令实现。

<template>
  <div>
    <p v-custom-show="isVisible">自定义指令实现的显示/隐藏</p>
  </div>
</template>

<script>
export default {
  directives: {
    'custom-show': {
      inserted(el, binding) {
        el.style.display = binding.value ? 'block' : 'none';
      },
      update(el, binding) {
        el.style.display = binding.value ? 'block' : 'none';
      }
    }
  },
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

动态绑定样式

除了指令，也可以通过动态绑定样式实现类似效果。

<template>
  <div>
    <p :style="{ display: isVisible ? 'block' : 'none' }">动态样式绑定</p>
  </div>
</template>

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

以上方法均能实现元素的显示/隐藏功能，具体选择取决于项目需求和使用场景。