首页 > 代码库 > VUE2.0实现购物车和地址选配功能学习第三节
VUE2.0实现购物车和地址选配功能学习第三节
第三节 使用v-for渲染商品列表
1.使用vue-resource插件引入json数据
(注:在谷歌中调试打断点--
,console还可以输出vm,res等属性列表,或者productList等一些值。如打出vm可以查看vue实例包含的属性和方法等)
html:
<ul class="cart-item-list">
<li v-for="(item,index) in productList">
<!--v-for="item in productList"这是vue1.0的用法-->
<div class="cart-tab-1">
<!-- 单选 -->
<div class="cart-item-check">
<a href="http://www.mamicode.com/javascipt:;" class="item-check-btn">
<svg class="icon icon-ok"><use xlink:href="http://www.mamicode.com/#icon-ok"></use></svg>
</a>
</div>
<!-- 商品图片 -->
<div class="cart-item-pic">
<img v-bind:src="http://www.mamicode.com/item.productImage" alt="烟">
<!--src="http://www.mamicode.com/{{item.productImage}}"貌似不能使用-->
<!--v-bind是比较好的办法,浏览器解析字符串直接写src会报错什么的-->
</div>
<!-- 商品名称 -->
<div class="cart-item-title">
<div class="item-name">{{item.productName+":"+index}}</div>
<!--{{item.productName+":"+index}}-->
</div>
<!-- 赠品 -->
<div class="item-include">
<dl>
<dt>赠送:</dt>
<dd v-for="part in item.parts" v-text="part.partsName"></dd>
</dl>
</div>
</div>
<!-- 单价 -->
<div class="cart-tab-2">
<div class="item-price">{{item.productPrice}}</div>
</div>
<div class="cart-tab-3">
<div class="item-quantity">
<div class="select-self select-self-open">
<div class="quentity">
<a href="javascript:;">-</a>
<input type="text" v-model="item.productQuentity">
<!--双向数据绑定功能,实现总金额实时变化功能-->
<a href="javascript:;">+</a>
</div>
</div>
<div class="item-stock">有货</div>
</div>
</div>
<div class="cart-tab-4">
<!-- 总金额 -->
<div class="item-price-total">{{item.productPrice*item.productQuentity}}</div>
</div>
<!-- 删除功能 -->
<div class="cart-tab-5">
<div class="cart-item-opration">
<a href="javascript:;" class="item-edit-btn">
<svg class="icon icon-del"><use xlink:href="http://www.mamicode.com/#icon-del"></use></svg>
</a>
</div>
</div>
</li>
</ul>
js:
/**
* Created by zs1414030853 on 2017/2/24.
*/
/*完整vue实例*/
var vm=new Vue({
el:"#app",
data:{
totalMoney:0,
productList:[]
/*初始值*/
},
filters:{
},
mounted:function () {
this.cartView();
},
methods:{
cartView: function () {
var _this =this;
/* this.$http.jsonp*/
this.$http.get("data/cart.json",{"id":123}).then(function (res) {
_this.productList =res.body.result.productList;
_this.totalMoney=res.body.result.totalMoney;
/*在运行的时候打断点可以查看res等属性和包含的方法值等*/
});
}
}
});数据cart.json:
{
"message":"",
"status":"1",
"result":{
"totalMoney":0,
"productList":[
{
"productId":"10001",
"productName":"黄鹤楼香烟",
"productPrice":19,
"productQuentity":3,
"productImage":"img/goods-1.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"打火机"
},
{
"partsId":"a002",
"partsName":"XXX"
}
]
},
{
"productId":"10002",
"productName":"加多宝",
"productPrice":8,
"productQuentity":2,
"productImage":"img/goods-2.jpg",
"parts":[
{
"partsId":"a001",
"partsName":"吸管"
}
]
},
{
"productId":"10003",
"productName":"耳机",
"productPrice":39,
"productQuentity":1,
"productImage":"img/ear.jpeg",
"parts":[]
}
]
}
}
VUE2.0实现购物车和地址选配功能学习第三节
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。