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; }); } } });
原文：http://www.cnblogs.com/hongmaju/p/6720794.html