当前位置：首页 > VUE

vue实现动态卡片

2026-02-18 21:35:33VUE

Vue 动态卡片实现方法

基础实现（静态数据）

创建一个 Vue 组件，使用 v-for 循环渲染卡片列表。卡片数据可以存储在组件的 data 属性中。

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

<script>
export default {
  data() {
    return {
      cards: [
        { title: 'Card 1', content: 'Content for card 1' },
        { title: 'Card 2', content: 'Content for card 2' }
      ]
    }
  }
}
</script>

<style>
.card-container {
  display: flex;
  gap: 16px;
}
.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}
</style>

动态数据加载

从 API 获取卡片数据，使用 axios 或其他 HTTP 客户端库。

<script>
import axios from 'axios'

export default {
  data() {
    return {
      cards: []
    }
  },
  async created() {
    const response = await axios.get('https://api.example.com/cards')
    this.cards = response.data
  }
}
</script>

交互功能实现

vue实现动态卡片

为卡片添加点击事件和其他交互功能。

<template>
  <div class="card-container">
    <div 
      v-for="(card, index) in cards" 
      :key="index" 
      class="card"
      @click="handleCardClick(card)"
      :class="{ 'active': card.isActive }"
    >
      <h3>{{ card.title }}</h3>
      <p>{{ card.content }}</p>
      <button @click.stop="removeCard(index)">Remove</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCardClick(card) {
      card.isActive = !card.isActive
    },
    removeCard(index) {
      this.cards.splice(index, 1)
    }
  }
}
</script>

动画效果

使用 Vue 的过渡系统为卡片添加动画效果。

vue实现动态卡片

<template>
  <transition-group name="card" tag="div" class="card-container">
    <div 
      v-for="(card, index) in cards" 
      :key="card.id"
      class="card"
    >
      <!-- card content -->
    </div>
  </transition-group>
</template>

<style>
.card-enter-active, .card-leave-active {
  transition: all 0.5s ease;
}
.card-enter, .card-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

响应式设计

使用 CSS 媒体查询确保卡片在不同屏幕尺寸下显示良好。

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

可复用组件

将卡片拆分为独立组件以便复用。

<!-- CardComponent.vue -->
<template>
  <div class="card" @click="$emit('card-click', card)">
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <card-component 
    v-for="card in cards" 
    :key="card.id"
    @card-click="handleCardClick"
  >
    <h3>{{ card.title }}</h3>
    <p>{{ card.content }}</p>
  </card-component>
</template>