vue3 循环添加card

你可以使用 Vue 3 的 `v-for` 指令来循环添加 `Card` 组件。下面是一个简单的例子：

<template>
  <div>
    <Card v-for="item in items" :key="item.id">{{ item.title }}</Card>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import Card from './Card.vue';

export default {
  components: {
    Card,
  },
  data() {
    return {
      items: [
        { id: 1, title: 'Card 1' },
        { id: 2, title: 'Card 2' },
        { id: 3, title: 'Card 3' },
      ],
    };
  },
  methods: {
    addItem() {
      const newItem = { id: this.items.length + 1, title: `Card ${this.items.length + 1}` };
      this.items.push(newItem);
    },
  },
};
</script>

在上面的代码中，我们首先引入了 `Card` 组件。然后在模板中使用 `v-for` 循环遍历 `items` 数组，并为每个数组项渲染一个 `Card` 组件。我们还添加了一个按钮，点击按钮将在 `items` 数组中添加一个新的项，这将导致新的 `Card` 组件被渲染在页面上。