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

怎么把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 apk可以在模拟器上正常安装使用,但是手机上无法正常安装
  • ¥15 office打开卡退(新电脑重装office系统后)
  • ¥300 FLUENT 火箭发动机燃烧EDC仿真
  • ¥15 【Hadoop 问题】Hadoop编译所遇问题hadoop-common: make failed with error code 2
  • ¥15 vb6.0+webbrowser无法加载某个网页求解
  • ¥15 RPA财务机器人采购付款流程
  • ¥15 计算机图形多边形及三次样条曲线绘制
  • ¥15 根据protues画的图用keil写程序
  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误