vue3 循环添加el-card

在 Vue3 中循环添加 `el-card` 可以使用 `v-for` 指令和组件的方式来实现。首先需要将 `el-card` 封装成一个组件，然后在父组件中使用 `v-for` 循环渲染这个组件。

下面是一个示例代码：

<template>
  <div>
    <my-card v-for="(item, index) in cardList" :key="index" :title="item.title" :content="item.content"></my-card>
  </div>
</template>

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

export default {
  components: {
    MyCard
  },
  data() {
    return {
      cardList: [
        {
          title: 'Card 1',
          content: 'This is the content of card 1'
        },
        {
          title: 'Card 2',
          content: 'This is the content of card 2'
        },
        {
          title: 'Card 3',
          content: 'This is the content of card 3'
        }
      ]
    };
  }
};
</script>

在这个示例中，我们将 `el-card` 封装成了一个名为 `MyCard` 的组件，在父组件中使用 `v-for` 循环渲染这个组件，并将 `cardList` 数组中的数据作为组件的属性传递给 `MyCard` 组件。

`MyCard` 组件的代码如下：

<template>
  <el-card :body-style="{ padding: '20px' }">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
    </div>
    <div>{{ content }}</div>
  </el-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  }
};
</script>

在 `MyCard` 组件中，我们接收了父组件传递过来的 `title` 和 `content` 属性，并将它们绑定到 `el-card` 组件上。

这样，在父组件中使用 `v-for` 循环渲染 `MyCard` 组件时，每个 `MyCard` 组件都会显示一个 `el-card`，并且根据传递进来的属性渲染出不同的内容。