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实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)

完善慕课网Vue2.0购物车功能

基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于VueVuexVue-router实现的购物商城(原生切换动画)效果

vue购物车和地址选配

学习笔记第三节课