vant vant-card循环绑定json数据

van-card循环输出json

默认data中声明数据

var app = new Vue({
                el: '#app',
                data: {
                      msg: [{"price":"2.00","desc":"描述信息","title":"商品标题","thumb":"https://img01.yzcdn.cn/vant/cat.jpeg"},{"price":"1.00","desc":"描述信息1","title":"商品标题1","thumb":"https://img01.yzcdn.cn/vant/cat.jpeg"}]       
            },

卡片部分

<van-card
      v-for="(item,index) in msg"
    num="2"
    :price="item.price"
    :desc="item.desc"
    :title="item.title"
    class="goods-card"
    :thumb="item.thumb"></van-card>
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button"></van-button>
  </template>
</van-swipe-cell>

<style>
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>