使用vue2实现购物车和地址选配功能
首先,vue基础js写法
newVue({
el:"#app",
//模型
data:{
},
filters:{
},
mounted:function(){
this.$nextTick(function(){
//初始化调用
});
},
computed:{
//实时计算
},
methods:{
}
});
v-for
{{item.productName}}
v-model
(实时更新)
{{item.productQuantity}}
v-bind
filters过滤器的使用
1.html引用方式
{{item.productPrice|money('元')}}
2.过滤器
filters:{
formatMoney:function(value,type){
return"¥"+value.toFixed(2)+type;
}
},
3.全局过滤器(写在newVue的外面)
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显示所有
more
data:{
limitNum:3
},
computed:{
filterAddress:function(){
returnthis.addressList.slice(0,this.limitNum);
}
},