正文
vue.js中请求数据v-for循环使用数据
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、效果图
2、cart.json{
"message":"",
"status":"1",
"result":{
"totalMoney":0,
"productList":[
{
"productId":"10001",
"productName":"黄鹤楼香烟",
"productPrice":19,
"productQuentity":2,
"productImage":"goods-1.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"打火机"
},
{
"partsId":"a002",
"partsName":"XXX"
}
]
},
{
"productId":"10002",
"productName":"加多宝",
"productPrice":8,
"productQuentity":3,
"productImage":"goods-2.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"吸管"
}
]
},
{
"productId":"10003",
"productName":"耳机",
"productPrice":39,
"productQuentity":4,
"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>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<!--遍历的时候，如何取得每项的索引，index就是索引-->
<li v-for="(item,index) in productList">
<div >产品名称：{{item.productName}}</div>
<dd v-for="part in item.parts" v-text="part.partsName"></dd>
<div>价格：{{item.productPrice+"--------------------"+index}}</div>
<div>数量：{{item.productQuentity}}</div>
<div>金额：{{item.productPrice*item.productQuentity}}</div><!-- 图片路径的设置，下面注释的这两个不能用，需要使用v-bind:src=""-->
<!--<img src="item.productImage" alt="">-->
<!--<img src="{{item.productImage}}" alt="">-->
<img v-bind:src="item.productImage" alt="">
</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>
{
"message":"",
"status":"1",
"result":{
"totalMoney":0,
"productList":[
{
"productId":"10001",
"productName":"黄鹤楼香烟",
"productPrice":19,
"productQuentity":2,
"productImage":"goods-1.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"打火机"
},
{
"partsId":"a002",
"partsName":"XXX"
}
]
},
{
"productId":"10002",
"productName":"加多宝",
"productPrice":8,
"productQuentity":3,
"productImage":"goods-2.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"吸管"
}
]
},
{
"productId":"10003",
"productName":"耳机",
"productPrice":39,
"productQuentity":4,
"productImage":"ear.jpeg",
"parts":[]
}
]
}
}
<!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>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<!--遍历的时候，如何取得每项的索引，index就是索引-->
<li v-for="(item,index) in productList">
<div >产品名称：{{item.productName}}</div>
<dd v-for="part in item.parts" v-text="part.partsName"></dd>
<div>价格：{{item.productPrice+"--------------------"+index}}</div>
<div>数量：{{item.productQuentity}}</div>
<div>金额：{{item.productPrice*item.productQuentity}}</div><!-- 图片路径的设置，下面注释的这两个不能用，需要使用v-bind:src=""-->
<!--<img src="item.productImage" alt="">-->
<!--<img src="{{item.productImage}}" alt="">-->
<img v-bind:src="item.productImage" alt="">
</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;
});
}
}});
