潜渊者 2023-02-02 16:06 采纳率: 70.7%
浏览 29
已结题

怎么把ant-design-vue的卡片meta属性设置成变量?

下面是ant-design-vue的一种卡片,我想把img的src和a-card-meta的title和description都设置成变量,请问代码该怎么写啊?


<a-card hoverable style="width: 300px">
    <template #cover>
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    </template>
    <template #actions>
      <setting-outlined key="setting" />
      <edit-outlined key="edit" />
      <ellipsis-outlined key="ellipsis" />
    </template>
    <a-card-meta title="Card title" description="This is the description">
      <template #avatar>
        <a-avatar src="https://joeschmoe.io/api/v1/random" />
      </template>
    </a-card-meta>
  </a-card>
  • 写回答

2条回答 默认 最新

  • since � 2023-02-02 16:20
    关注

    //template部分

    <a-card hoverable style="width: 300px">
        <template #cover>
          <img
            alt="example"
            :src="imgUrl"
          />
        </template>
        <template #actions>
          <setting-outlined key="setting" />
          <edit-outlined key="edit" />
          <ellipsis-outlined key="ellipsis" />
        </template>
        <a-card-meta :title="cardTitle" :description="description">
          <template #avatar>
            <a-avatar :src="acatarSrc" />
          </template>
        </a-card-meta>
      </a-card>
    
    

    //js代码部分

    data(){
    return{
    imgUrl:"https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    cardTitle:"Card title",
    description:"This is the description",
    acatarSrc:"https://joeschmoe.io/api/v1/random"
    }
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月11日
  • 已采纳回答 2月3日
  • 创建了问题 2月2日

悬赏问题

  • ¥15 MySQL数据库安装时出现这些问题怎么办
  • ¥20 请用MATLAB画含有二重积分和累加求和的随时间t变化的函数图像,不知如何把二重积分加到循环里,请解答一下
  • ¥15 kali终端update时出现这样的情况
  • ¥15 matlab调用stl文件时报错说内存不足
  • ¥20 医学图像格式、医学图像后处理
  • ¥15 MATLAB中的矩阵分离问题
  • ¥15 服务端可运行语言,解析unity文件
  • ¥15 英飞凌TC387使用MCAL唤醒TJA1145问题
  • ¥15 android tv图标显示异常
  • ¥20 (标签-AR|关键词-预测分析)