当前位置：首页 > VUE

vue实现div切换

2026-03-09 18:04:47VUE

使用v-if和v-else指令实现切换

在Vue中可以通过v-if和v-else指令实现div切换。这种方式会根据条件渲染不同的div元素。

<template>
  <div>
    <button @click="showFirst = !showFirst">切换视图</button>
    <div v-if="showFirst">第一个div内容</div>
    <div v-else>第二个div内容</div>
  </div>
</template>

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

使用v-show实现切换

v-show与v-if不同，它只是切换元素的displayCSS属性，元素始终会被渲染并保留在DOM中。

<template>
  <div>
    <button @click="showFirst = !showFirst">切换视图</button>
    <div v-show="showFirst">第一个div内容</div>
    <div v-show="!showFirst">第二个div内容</div>
  </div>
</template>

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

使用动态组件实现切换

对于更复杂的切换场景，可以使用Vue的动态组件<component>配合is属性。

<template>
  <div>
    <button @click="currentComponent = currentComponent === 'First' ? 'Second' : 'First'">
      切换组件
    </button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'First'
    }
  },
  components: {
    First: {
      template: '<div>第一个组件内容</div>'
    },
    Second: {
      template: '<div>第二个组件内容</div>'
    }
  }
}
</script>

使用CSS过渡效果

可以为切换添加过渡效果，使切换更加平滑。

<template>
  <div>
    <button @click="showFirst = !showFirst">切换视图</button>
    <transition name="fade">
      <div v-if="showFirst" key="first">第一个div内容</div>
      <div v-else key="second">第二个div内容</div>
    </transition>
  </div>
</template>

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

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

使用路由实现切换

对于SPA应用，可以通过Vue Router实现不同视图的切换。

vue实现div切换

// router.js
const routes = [
  { path: '/first', component: FirstComponent },
  { path: '/second', component: SecondComponent }
]

<!-- App.vue -->
<template>
  <div>
    <router-link to="/first">显示第一个</router-link>
    <router-link to="/second">显示第二个</router-link>
    <router-view></router-view>
  </div>
</template>

以上方法可以根据具体需求选择使用，简单的显示隐藏推荐使用v-if/v-else或v-show，组件化程度高的场景适合使用动态组件，需要页面级切换则使用路由。