使用vue2实现购物车和地址选配功能

new Vue({  el:"#app",  //模型  data:{  },  filters:{  },  mounted:function(){    this.$nextTick(function(){    //初始化调用    });  },  computed:{    //实时计算  },  methods:{  }});

<li v-for="(item,index) in productList">  <div class="item-name">{{item.productName}}</div></li>

<input type="text" value="0" disabled v-model="item.productQuantity"><div class="item-price-total">{{item.productQuantity}}</div>

<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}"><!--可通过更改item.checked的值设置是否选中--><!--必须用v-bind 不可直接在class里面直接使用{{}}--><!--v-bind:class= 可简写为 :class= -->

<div class="item-price">{{item.productPrice | money('元')}}</div>

filters:{  formatMoney:function(value,type){    return "￥"+value.toFixed(2)+ type;  }},

Vue.filter("money",function(value,type){  return "￥"+value.toFixed(2) + type; //保留两位小数 结果eg:￥19.00元});

@click="method(param)"//或者@click="delFlag=false"@click="limitNum=addressList.length"

<li v-for="(item,index) in filterAddress"><div class="shipping-addr-more"><a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length">  more  <i class="i-up-down">   <i class="i-up-down-l"></i>   <i class="i-up-down-r"></i>  </i> </a></div>data:{    limitNum:3  },computed:{  filterAddress:function(){    return this.addressList.slice(0,this.limitNum);  }},

<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"><!--其中currentIndex在js里需要定义-->

<ul>  <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">   <div class="name">标准配送</div>   <div class="price">Free</div>  </li >  <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">   <div class="name">高级配送</div>   <div class="price">180</div>  </li> </ul> <!--其中shippingMethod在js里需要定义-->

<div class="md-overlay" v-if="delFlag"></div>

var _this = this;this.$http.get("data/address.json").then(function(response){    _this.addressList = response; //这里不能直接用this 此this非彼this 所以只能声明_this}); //以下为ES6写法，就可以直接用this了let _this = this;  //没用，就放这看看~this.$http.get("data/cartData.json",{"id":123}).then(res=>{  this.productList = res.data.result.list;});

this.productList.forEach(function(item,index){  if(typeof item.checked == 'undefined'){   //如果item中没有checked属性 在item对象中添加checked属性，值为true    _this.$set(item,"checked",true);//局部注册    Vue.set(item,"checked",true);//全局注册  }});