vue实现切换隐藏

实现元素切换隐藏的Vue方法

使用v-show指令控制元素显示与隐藏。该指令通过切换CSS的display属性实现，元素始终保留在DOM中：

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <div v-show="isVisible">这段内容会动态显示/隐藏</div>
  </div>
</template>

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

使用v-if实现条件渲染

v-if会完全销毁和重建DOM元素，适合切换频率较低的场景：

<template>
  <div>
    <button @click="toggle">切换状态</button>
    <p v-if="showElement">元素内容</p>
  </div>
</template>

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

动态CSS类名绑定

通过绑定class实现更复杂的显示/隐藏效果：

<template>
  <div>
    <button @click="isHidden = !isHidden">切换</button>
    <div :class="{ 'hidden': isHidden }">内容区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: false
    }
  }
}
</script>

<style>
.hidden {
  display: none;
  /* 可以添加过渡效果 */
  transition: opacity 0.3s;
}
</style>

过渡动画效果

为显示/隐藏添加平滑过渡：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">带过渡效果的内容</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

组件间的状态共享

通过Vuex管理全局显示状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isPanelVisible: false
  },
  mutations: {
    togglePanel(state) {
      state.isPanelVisible = !state.isPanelVisible
    }
  }
})

组件内调用：

<template>
  <div>
    <button @click="$store.commit('togglePanel')">切换面板</button>
    <div v-show="$store.state.isPanelVisible">面板内容</div>
  </div>
</template>