vue怎么实现隐藏效果

使用v-show指令

v-show通过控制CSS的display属性实现隐藏效果。元素始终保留在DOM中，仅切换显示状态。

<div v-show="isHidden">内容</div>

data() {
  return {
    isHidden: false // true时隐藏
  }
}

使用v-if指令

v-if根据条件动态添加或移除DOM元素，适合频繁切换的场景。

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

data() {
  return {
    isVisible: true // false时隐藏
  }
}

动态绑定class

通过对象语法绑定hidden类名，需提前定义CSS样式。

<div :class="{ 'hidden': shouldHide }">内容</div>

.hidden {
  display: none;
}

data() {
  return {
    shouldHide: true // 为true时隐藏
  }
}

动态绑定style

直接内联修改display样式，适合临时性隐藏需求。

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

data() {
  return {
    hideElement: true // 为true时隐藏
  }
}

使用transition组件

结合过渡效果实现平滑隐藏，需配合CSS过渡类名。

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-leave-to {
  opacity: 0;
}

条件渲染组件

对于组件级别的隐藏，可直接在模板中使用逻辑判断。

<custom-component v-if="renderComponent" />

data() {
  return {
    renderComponent: false // 为false时不渲染
  }
}