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

Question

下面是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>

Answer 1

//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"
}
}