当前位置：首页 > VUE

vue实现点击切换内容

2026-01-21 10:55:16VUE

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

通过Vue的v-if和v-else指令可以轻松实现内容切换。定义一个布尔变量控制显示状态，点击事件切换该变量值。

<template>
  <div>
    <button @click="showContent = !showContent">切换内容</button>
    <div v-if="showContent">显示内容A</div>
    <div v-else>显示内容B</div>
  </div>
</template>

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

使用动态组件实现切换

对于更复杂的场景，可以使用Vue的<component>动态组件。通过:is属性绑定要渲染的组件名。

vue实现点击切换内容

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用CSS类切换实现样式变化

如果只需要样式变化而不改变DOM结构，可以通过绑定class实现。

vue实现点击切换内容

<template>
  <div>
    <button @click="isActive = !isActive">切换样式</button>
    <div :class="{ active: isActive }">内容区域</div>
  </div>
</template>

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

<style>
.active {
  background-color: #f0f0f0;
  color: #333;
}
</style>

使用路由切换不同页面内容

对于SPA应用，可以通过Vue Router实现不同页面的内容切换。

// router.js
const routes = [
  { path: '/page1', component: Page1 },
  { path: '/page2', component: Page2 }
]

<template>
  <div>
    <router-link to="/page1">页面1</router-link>
    <router-link to="/page2">页面2</router-link>
    <router-view></router-view>
  </div>
</template>

使用transition添加切换动画

为内容切换添加平滑的过渡效果，可以使用Vue的<transition>组件。

<template>
  <div>
    <button @click="show = !show">切换动画</button>
    <transition name="fade">
      <div v-if="show">会淡入淡出的内容</div>
    </transition>
  </div>
</template>

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