当前位置：首页 > VUE

vue 实现vshow

2026-03-27 23:43:12VUE

实现 v-show 功能

在 Vue 中，v-show 是一个内置指令，用于根据表达式的真假值切换元素的 display CSS 属性。以下是实现类似功能的几种方法。

使用 v-show 指令

<template>
  <div v-show="isVisible">内容</div>
</template>

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

v-show 通过切换 display: none 来控制元素的显示与隐藏，适合频繁切换的场景。

使用 v-if 指令

<template>
  <div v-if="isVisible">内容</div>
</template>

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

v-if 会完全销毁或重建 DOM 元素，适合条件很少改变的场景。

动态绑定 style

<template>
  <div :style="{ display: isVisible ? 'block' : 'none' }">内容</div>
</template>

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

通过动态绑定 style 属性实现类似 v-show 的效果。

动态绑定 class

<template>
  <div :class="{ 'hidden': !isVisible }">内容</div>
</template>

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

<style>
.hidden {
  display: none;
}
</style>

通过动态绑定 class 并定义 CSS 类来实现隐藏效果。

使用计算属性

<template>
  <div :style="computedStyle">内容</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  computed: {
    computedStyle() {
      return {
        display: this.isVisible ? 'block' : 'none'
      }
    }
  }
}
</script>

通过计算属性动态返回样式对象，提高代码的可读性和复用性。

使用自定义指令

<template>
  <div v-custom-show="isVisible">内容</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>

通过自定义指令实现类似 v-show 的功能，适合需要复用逻辑的场景。

使用 render 函数

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  render(h) {
    return h('div', {
      style: {
        display: this.isVisible ? 'block' : 'none'
      }
    }, '内容')
  }
}
</script>

在 render 函数中直接控制元素的显示与隐藏，适合需要更灵活控制的场景。

vue 实现vshow