当前位置：首页 > VUE

vue实现动态卡片

2026-01-18 05:09:50VUE

实现动态卡片的基本思路

在Vue中实现动态卡片通常涉及数据绑定、循环渲染和交互逻辑。动态卡片的内容、样式或数量可以根据数据变化而更新。

数据驱动的卡片列表

使用v-for指令循环渲染卡片，数据存储在组件的data或computed属性中：

<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: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' }
      ]
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 8px;
  border-radius: 4px;
}
</style>

动态添加/删除卡片

通过方法修改数据数组实现卡片的动态增删：

methods: {
  addCard() {
    this.cards.push({
      title: `卡片${this.cards.length + 1}`,
      content: `新增内容${this.cards.length + 1}`
    })
  },
  removeCard(index) {
    this.cards.splice(index, 1)
  }
}

卡片拖拽排序

使用第三方库如vuedraggable实现拖拽排序：

import draggable from 'vuedraggable'

export default {
  components: { draggable },
  template: `
    <draggable v-model="cards" group="cards" @end="onDragEnd">
      <div v-for="(card, index) in cards" :key="index" class="card">
        {{ card.title }}
      </div>
    </draggable>
  `,
  methods: {
    onDragEnd() {
      console.log('排序变化', this.cards)
    }
  }
}

响应式卡片布局

结合CSS Grid或Flexbox实现自适应布局：

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

动态卡片内容

根据条件显示不同的卡片内容或样式：

<template>
  <div class="card" :class="{ 'active': card.isActive }">
    <component :is="card.component" v-if="card.component" />
    <template v-else>
      {{ card.content }}
    </template>
  </div>
</template>

异步加载卡片数据

从API异步获取卡片数据：

async created() {
  try {
    const response = await axios.get('/api/cards')
    this.cards = response.data
  } catch (error) {
    console.error('获取卡片数据失败', error)
  }
}

卡片动画效果

使用Vue的过渡系统添加动画：

<transition-group name="card-fade" tag="div" class="card-container">
  <div v-for="card in cards" :key="card.id" class="card">
    {{ card.title }}
  </div>
</transition-group>

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

vue实现动态卡片