首页 > 代码库 > vue界面初始化查询列表的方法之购物车案例
vue界面初始化查询列表的方法之购物车案例
var vm = new Vue({
el:"#app",
data:{
totalMoney:0,
productList:[],
checkAllFlag:false ，
delFlag：false
delOneProduct:[],
},
filters:{ //局部过滤器 ，调用方法{{number | formatMoney}}
formatMoney:function(value){
return "$" +value.toFixed(2) //留两位小数
}
},
mounted:function(){
this.$nextTick(function(){//加上这个是确保Vue已经实例化成功
this.cartView();
})
},
methonds:{
cartView:function(){
var _this = this; //因为在查询后的回调里不能保证this代表vue，所以这里要用变量接收一下方便回调里用
this.$http.get("data/cartData.json",{"id":123}).then(function(res){//json可以换成请求后的接口，id为查询的所传的参数没有可以不写
_this.productList = res.body.result.list;
})
this.$http.get("data/cartData.json",{"id":123}).then(res=>{//这里是es6的写法除了写法简单外，它还能将作用域变成同一个，所以就不用定义_this变量了
this.productList = res.body.result.list;
})
}，
changeNum:function(item,way){//数量的加减item代表单条数据，way是加减的标识
if(way>0){
item.number++;
}else{
item.numer--;
if(item.number<1){
item.numer = 1;
}
}
calcTotalPrice()
},
selectedProduct:function(item){//选择商品(单选),调用:class="{‘check‘:item.checked}" @click = ‘selectedProduct(item)‘
if(typeof item.checked == ‘undefined‘){//判断item里是否存在checked属性，不存在就注册一个。
Vue.set(item,"checked",true)//全局注册，默认值为true
this.$set(item,‘checked‘,true) //局部注册
}else{
item.checked = !item.checked;
}
calcTotalPrice()
},
checkAll:function(flag){//全选全不选，全选调用：class="{‘check‘:checkAllFlag}" @click="checkAll(true)";取消调用 @click="checkAll(false)"
this.checkAllFlag = flag;
this.productList.forEach(item,index=>{
if(typeof item.checked == ‘undefined‘){
this.$set(item,"checed",this.checkAllFlag)
}else{
item.checked = this.checkAllFlag
}
calcTotalPrice()
})
},calcTotalPrice:function(){ 计算总金额
this.totalMoney = 0;
this.productList.forEach(item,index=>{
if(item.checked){
this.totalMoney +=item.productPrice*item.productQuentity;
}
})
}，
delProduct：function(item){//点击删除弹出是否删除的框
this.delFlag = true;
this.delOneProduct = item;
}，
delProduct:function(){//点击是调用的方法
var index = this.productList.indexOf(this.delOneProduct)
this.productList.splice(index,1); //这里只是界面删除，如果真的想删除需要调后台额删除接口
this.delFlag = false;
}
}
})
//全局过滤器，可以写在一个工具js里{{numer | money（‘元‘）}}
Vue.filter(‘money‘,function(value,type){ //type是调用的时候传递的参数，没有可以不写
return "$" + value.toFixed(2) + type
})
vue界面初始化查询列表的方法之购物车案例