当前位置：首页 > VUE

vue实现卡片切换

2026-01-18 20:05:06VUE

Vue实现卡片切换的方法

使用v-if和v-show指令

通过Vue的指令控制卡片的显示与隐藏，适合简单的卡片切换需求。

<template>
  <div>
    <button @click="currentCard = 'card1'">卡片1</button>
    <button @click="currentCard = 'card2'">卡片2</button>

    <div v-if="currentCard === 'card1'">
      卡片1内容
    </div>
    <div v-if="currentCard === 'card2'">
      卡片2内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentCard: 'card1'
    }
  }
}
</script>

使用动态组件

利用Vue的动态组件功能实现更灵活的卡片切换。

<template>
  <div>
    <button @click="currentComponent = 'Card1'">卡片1</button>
    <button @click="currentComponent = 'Card2'">卡片2</button>

    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import Card1 from './Card1.vue'
import Card2 from './Card2.vue'

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

添加过渡动画

为卡片切换添加平滑的过渡效果，提升用户体验。

<template>
  <div>
    <button @click="toggleCard">切换卡片</button>

    <transition name="fade">
      <div v-if="showCard1" key="card1" class="card">
        卡片1内容
      </div>
      <div v-else key="card2" class="card">
        卡片2内容
      </div>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

使用第三方库

借助vue-slick等轮播组件库实现更复杂的卡片切换效果。

<template>
  <div>
    <slick ref="slick" :options="slickOptions">
      <div class="card">卡片1内容</div>
      <div class="card">卡片2内容</div>
      <div class="card">卡片3内容</div>
    </slick>
  </div>
</template>

<script>
import Slick from 'vue-slick'

export default {
  components: { Slick },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1,
        arrows: true,
        dots: true
      }
    }
  }
}
</script>

实现无限循环切换

通过数组索引控制实现无限循环的卡片切换效果。

<template>
  <div>
    <button @click="prevCard">上一张</button>
    <button @click="nextCard">下一张</button>

    <div class="card-container">
      <div v-for="(card, index) in cards" 
           :key="index" 
           v-show="index === currentIndex">
        {{ card.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { content: '卡片1内容' },
        { content: '卡片2内容' },
        { content: '卡片3内容' }
      ],
      currentIndex: 0
    }
  },
  methods: {
    nextCard() {
      this.currentIndex = (this.currentIndex + 1) % this.cards.length
    },
    prevCard() {
      this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length
    }
  }
}
</script>

vue实现卡片切换