vant vant-card循环绑定json数据

最新推荐文章于 2025-03-04 17:06:42 发布

溜溜达达看风景

最新推荐文章于 2025-03-04 17:06:42 发布

阅读量1.9k

点赞数 2

文章标签： c# java 面试前端

本文链接：https://blog.youkuaiyun.com/Ghyanyan123456/article/details/121466218

版权

该博客介绍了如何在Vue.js应用中利用Vant UI库创建一个商品卡片列表，并通过v-for指令进行数据循环输出。每个卡片包含价格、描述、标题和商品图片，同时在右侧添加了一个删除按钮，展示了如何自定义卡片的右侧面板内容。样式方面，对卡片和删除按钮进行了简单的样式定制，确保了布局和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>