如何为列表视图中的最后一张卡片添加底边距？

// 列表视图组件
function ListView({ cards }) {
  return (
    <div>
      {cards.map((card, index) => (
        <Card key={index} data={card} isLast={index === cards.length - 1} />
      ))}
    </div>
  );
}

// 卡片组件
function Card({ data, isLast }) {
  return (
    <div className={`card ${isLast ? 'last-card' : ''}`}>
      {/* 卡片内容 */}
    </div>
  );
}

// CSS样式
.last-card {
  margin-bottom: 10px;
}

<template>
  <div>
    <Card v-for="(card, index) in cards" :key="index" :data="card" :is-last="index === cards.length - 1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [...],
    };
  },
};

// 卡片组件
<template>
  <div :class="['card', isLast ? 'last-card' : '']">
    <!-- 卡片内容 -->
  </div>
</template>

<style>
.last-card {
  margin-bottom: 10px;
}
</style>