当前位置：首页 > VUE

vue实现卡片列表

2026-03-10 02:34:18VUE

实现卡片列表的基本结构

使用 Vue 的 v-for 指令动态渲染卡片列表。假设数据存储在 cards 数组中，每个卡片包含 title、description 和 image 字段。

<template>
  <div class="card-list">
    <div v-for="(card, index) in cards" :key="index" class="card">
      <img :src="card.image" :alt="card.title" />
      <h3>{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { title: "Card 1", description: "Description 1", image: "image1.jpg" },
        { title: "Card 2", description: "Description 2", image: "image2.jpg" },
      ],
    };
  },
};
</script>

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

从 API 动态加载数据

通过 axios 或 fetch 从后端接口获取卡片数据，并在 mounted 钩子中加载。

<script>
import axios from "axios";

export default {
  data() {
    return {
      cards: [],
    };
  },
  async mounted() {
    try {
      const response = await axios.get("https://api.example.com/cards");
      this.cards = response.data;
    } catch (error) {
      console.error("Failed to fetch cards:", error);
    }
  },
};
</script>

添加交互功能

为卡片添加点击事件或悬停效果，提升用户体验。

<template>
  <div class="card-list">
    <div 
      v-for="(card, index) in cards" 
      :key="index" 
      class="card"
      @click="handleCardClick(card)"
      @mouseover="hover = true"
      @mouseleave="hover = false"
      :class="{ 'card-hover': hover }"
    >
      <img :src="card.image" :alt="card.title" />
      <h3>{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
    };
  },
  methods: {
    handleCardClick(card) {
      console.log("Card clicked:", card);
      // 可以跳转到详情页或触发其他逻辑
    },
  },
};
</script>

<style scoped>
.card-hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}
</style>

使用组件化拆分

将卡片封装为独立组件（如 CardItem.vue），提高代码复用性。

<!-- CardItem.vue -->
<template>
  <div class="card" @click="$emit('card-click', card)">
    <img :src="card.image" :alt="card.title" />
    <h3>{{ card.title }}</h3>
    <p>{{ card.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    card: Object,
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div class="card-list">
    <CardItem 
      v-for="(card, index) in cards" 
      :key="index" 
      :card="card"
      @card-click="handleCardClick"
    />
  </div>
</template>

<script>
import CardItem from "./CardItem.vue";

export default {
  components: { CardItem },
  methods: {
    handleCardClick(card) {
      console.log("Card clicked:", card);
    },
  },
};
</script>

响应式布局优化

通过 CSS Grid 或媒体查询适配不同屏幕尺寸。

vue实现卡片列表

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

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