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="javascipt:;" class="item-check-btn">
                     <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                 </a>
             </div>
             <!-- 商品图片 -->
             <div class="cart-item-pic">
                 <img v-bind:src="item.productImage" alt="烟">
                 <!--src="{{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="#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":[]
       }
     ]
   }
 }