vue实现卡片列表

Vue 实现卡片列表

使用 v-for 动态渲染卡片列表

通过 Vue 的 v-for 指令可以动态渲染卡片列表，数据通常存储在组件的 data 或通过 API 获取。

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

<script>
export default {
  data() {
    return {
      cards: [
        { title: '卡片1', description: '描述内容1' },
        { title: '卡片2', description: '描述内容2' },
        { title: '卡片3', description: '描述内容3' }
      ]
    }
  }
}
</script>

<style scoped>
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

使用组件化拆分卡片

将卡片拆分为单独的组件，提高代码复用性和可维护性。

<template>
  <div class="card-list">
    <CardItem v-for="(card, index) in cards" :key="index" :card="card" />
  </div>
</template>

<script>
import CardItem from './CardItem.vue'

export default {
  components: { CardItem },
  data() {
    return {
      cards: [
        { title: '卡片1', description: '描述内容1' },
        { title: '卡片2', description: '描述内容2' },
        { title: '卡片3', description: '描述内容3' }
      ]
    }
  }
}
</script>

CardItem.vue 文件内容：

<template>
  <div class="card">
    <h3>{{ card.title }}</h3>
    <p>{{ card.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    card: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

响应式布局与样式优化

使用 CSS Grid 或 Flexbox 实现响应式布局，确保卡片在不同屏幕尺寸下表现良好。

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

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

从 API 获取卡片数据

通过异步请求获取卡片数据，增强动态性。

<template>
  <div class="card-list">
    <CardItem v-for="(card, index) in cards" :key="index" :card="card" />
  </div>
</template>

<script>
import CardItem from './CardItem.vue'
import axios from 'axios'

export default {
  components: { CardItem },
  data() {
    return {
      cards: []
    }
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/cards')
      this.cards = response.data
    } catch (error) {
      console.error('获取卡片数据失败:', error)
    }
  }
}
</script>

添加卡片交互功能

为卡片添加点击事件或其他交互功能，提升用户体验。

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

<script>
import CardItem from './CardItem.vue'

export default {
  components: { CardItem },
  data() {
    return {
      cards: [
        { id: 1, title: '卡片1', description: '描述内容1' },
        { id: 2, title: '卡片2', description: '描述内容2' },
        { id: 3, title: '卡片3', description: '描述内容3' }
      ]
    }
  },
  methods: {
    handleCardClick(card) {
      console.log('点击卡片:', card)
      // 可以跳转到详情页或其他操作
    }
  }
}
</script>

在 CardItem.vue 中触发点击事件：

<template>
  <div class="card" @click="$emit('click', card)">
    <h3>{{ card.title }}</h3>
    <p>{{ card.description }}</p>
  </div>
</template>