首页 > 代码库 > vue.js中请求数据v-for循环使用数据

vue.js中请求数据v-for循环使用数据

2024-09-15 09:43:35   217人阅读

1、效果图

技术分享

2、cart.json

{
  "message":"",
  "status":"1",
  "result":{
    "totalMoney":0,
    "productList":[
      {
        "productId":"10001",
        "productName":"黄鹤楼香烟",
        "productPrice":19,
        "productQuentity":1,
        "productImage":"goods-1.jpg",
        "parts":[
          {
            "partsId":"a001",
            "partsName":"打火机"
          },
          {
            "partsId":"a002",
            "partsName":"XXX"
          }
        ]
      },
      {
        "productId":"10002",
        "productName":"加多宝",
        "productPrice":8,
        "productQuentity":1,
        "productImage":"goods-2.jpg",
        "parts":[
          {
            "partsId":"a001",
            "partsName":"吸管"
          }
        ]
      },
      {
        "productId":"10003",
        "productName":"耳机",
        "productPrice":39,
        "productQuentity":1,
        "productImage":"ear.jpeg",
        "parts":[]
      }
    ]
  }
}

3、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<!--v-for在productList集合中得到子元素item，在item中得到item的属性，或者再得到item的子元素-->
    <li v-for="item in productList">
        <div >产品名称：{{item.productName}}</div>
        <dd v-for="part in item.parts" v-text="part.partsName"></dd>
        <div>价格：{{item.productPrice}}</div>

    </li>

</div>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>

4、cart.js

/**
 * Created by kk on 2017/4/16.
 */
var vm =new Vue({
    el:"#app",
    data:{
        // title:"hello vue"
        totalMoney:0,
        productList:[]
    },
    filters:{

    },
    mounted:function () {
        //类似于jquery中的ready方法
        this.cartView();
    },
    methods:{
        cartView:function () {
    // this.title="Vue hello"
            var _this=this;
            this.$http.get("data/cart.json",{"id":123}).then(function (res) {
                _this.productList=res.body.result. productList;//body是vue封装的一层
                _this.totalMoney=res.body.result.totalMoney;
            });
}
    }

});

 

vue.js中请求数据v-for循环使用数据


联系
我们