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

首先，vue基础js写法

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

v-for

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

v-model

(实时更新)

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

v-bind

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

filters过滤器的使用

1.html引用方式

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

2.过滤器

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

3.全局过滤器（写在new Vue的外面）

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

调用methods中的方法：

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

computed 实时计算

如下：默认显示三条数据，点击more 显示所有

<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);  }},

先提出一两个经典的实例

1.以下实现了对循环卡片的点击 选中

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

2.以下实现了对固定卡片的点击 选中

<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里需要定义-->