VUE2.0实现购物车和地址选配功能学习第三节
Posted AfterA11
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE2.0实现购物车和地址选配功能学习第三节相关的知识,希望对你有一定的参考价值。
第三节 使用v-for渲染商品列表
1.使用vue-resource插件引入json数据
(注:在谷歌中调试打断点--
,console还可以输出vm,res等属性列表,或者productList等一些值。如打出vm可以查看vue实例包含的属性和方法等)
1 html: 2 <ul class="cart-item-list"> 3 <li v-for="(item,index) in productList"> 4 <!--v-for="item in productList"这是vue1.0的用法--> 5 <div class="cart-tab-1"> 6 <!-- 单选 --> 7 <div class="cart-item-check"> 8 <a href="javascipt:;" class="item-check-btn"> 9 <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg> 10 </a> 11 </div> 12 <!-- 商品图片 --> 13 <div class="cart-item-pic"> 14 <img v-bind:src="item.productImage" alt="烟"> 15 <!--src="{{item.productImage}}"貌似不能使用--> 16 <!--v-bind是比较好的办法,浏览器解析字符串直接写src会报错什么的--> 17 </div> 18 <!-- 商品名称 --> 19 <div class="cart-item-title"> 20 <div class="item-name">{{item.productName+":"+index}}</div> 21 <!--{{item.productName+":"+index}}--> 22 </div> 23 <!-- 赠品 --> 24 <div class="item-include"> 25 <dl> 26 <dt>赠送:</dt> 27 <dd v-for="part in item.parts" v-text="part.partsName"></dd> 28 </dl> 29 </div> 30 </div> 31 <!-- 单价 --> 32 <div class="cart-tab-2"> 33 <div class="item-price">{{item.productPrice}}</div> 34 </div> 35 <div class="cart-tab-3"> 36 <div class="item-quantity"> 37 <div class="select-self select-self-open"> 38 <div class="quentity"> 39 <a href="javascript:;">-</a> 40 <input type="text" v-model="item.productQuentity"> 41 <!--双向数据绑定功能,实现总金额实时变化功能--> 42 <a href="javascript:;">+</a> 43 </div> 44 </div> 45 <div class="item-stock">有货</div> 46 </div> 47 </div> 48 <div class="cart-tab-4"> 49 <!-- 总金额 --> 50 <div class="item-price-total">{{item.productPrice*item.productQuentity}}</div> 51 </div> 52 <!-- 删除功能 --> 53 54 <div class="cart-tab-5"> 55 <div class="cart-item-opration"> 56 <a href="javascript:;" class="item-edit-btn"> 57 <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg> 58 </a> 59 </div> 60 </div> 61 62 </li> 63 </ul> 64 js: 65 66 /** 67 * Created by zs1414030853 on 2017/2/24. 68 */ 69 /*完整vue实例*/ 70 var vm=new Vue({ 71 el:"#app", 72 data:{ 73 totalMoney:0, 74 productList:[] 75 /*初始值*/ 76 }, 77 78 filters:{ 79 80 }, 81 82 mounted:function () { 83 this.cartView(); 84 85 }, 86 87 methods:{ 88 cartView: function () { 89 var _this =this; 90 /* this.$http.jsonp*/ 91 this.$http.get("data/cart.json",{"id":123}).then(function (res) { 92 _this.productList =res.body.result.productList; 93 _this.totalMoney=res.body.result.totalMoney; 94 /*在运行的时候打断点可以查看res等属性和包含的方法值等*/ 95 }); 96 } 97 } 98 99 });
数据cart.json: 100 { 101 "message":"", 102 "status":"1", 103 "result":{ 104 "totalMoney":0, 105 "productList":[ 106 { 107 "productId":"10001", 108 "productName":"黄鹤楼香烟", 109 "productPrice":19, 110 "productQuentity":3, 111 "productImage":"img/goods-1.jpg", 112 "parts":[ 113 { 114 "partsId":"a001", 115 "partsName":"打火机" 116 }, 117 { 118 "partsId":"a002", 119 "partsName":"XXX" 120 } 121 ] 122 }, 123 { 124 "productId":"10002", 125 "productName":"加多宝", 126 "productPrice":8, 127 "productQuentity":2, 128 "productImage":"img/goods-2.jpg", 129 "parts":[ 130 { 131 "partsId":"a001", 132 "partsName":"吸管" 133 } 134 ] 135 }, 136 { 137 "productId":"10003", 138 "productName":"耳机", 139 "productPrice":39, 140 "productQuentity":1, 141 "productImage":"img/ear.jpeg", 142 "parts":[] 143 } 144 ] 145 } 146 }
以上是关于VUE2.0实现购物车和地址选配功能学习第三节的主要内容,如果未能解决你的问题,请参考以下文章
VUE2.0实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于VueVuexVue-router实现的购物商城(原生切换动画)效果