vue antd 卡片 列表

为了实现vue antd卡片列表，您可以按照以下步骤进行操作：

1.首先，您需要安装Vue和Ant Design Vue。您可以使用以下命令进行安装：

npm install vue ant-design-vue --save

2.在您的Vue组件中，您需要导入所需的组件并在template中使用它们。以下是一个简单的示例：

<template>
  <div>
    <a-card v-for="(item, index) in list" :key="index" @click="handleClick(index)">
      <img :src="item.imgUrl" alt="图片">
      <div>{{ item.title }}</div>
      <div>{{ item.description }}</div>
    </a-card>
  </div>
</template>

<script>
import { Card } from 'ant-design-vue';

export default {
  components: {
    'a-card': Card,
  },
  data() {
    return {
      list: [
        {
          imgUrl: 'https://example.com/image1.jpg',
          title: '标题1',
          description: '描述1',
        },
        {
          imgUrl: 'https://example.com/image2.jpg',
          title: '标题2',
          description: '描述2',
        },
        // ...
      ],
      activeIndex: -1,
    };
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
    },
  },
};
</script>

3.在上面的示例中，我们使用了Ant Design Vue的Card组件来显示每个项目。我们使用v-for指令循环遍历列表中的每个项目，并使用@click指令将点击事件绑定到每个卡片上。当用户单击卡片时，我们将调用handleClick方法，并将当前卡片的索引作为参数传递给它。

4.在handleClick方法中，我们将当前卡片的索引存储在activeIndex变量中。我们可以使用这个变量来控制显示每张图片的详细信息。例如，我们可以在模板中添加以下代码：

<div v-if="activeIndex === index">
  <p>{{ item.details }}</p>
</div>

这将在用户单击卡片时显示当前项目的详细信息。