购物车案例代码

 var vm = new Vue({
            el:"#box",
            data:{
                checkgroup:[],
                isChecked:false,
                datalist:[
                    {
                        name:"商品1",
                        price:10,
                        number:1,
                        id:1
                    },
                    {
                        name:"商品2",
                        price:20,
                        number:2,
                        id:2
                    },
                    {
                        name:"商品3",
                        price:30,
                        number:3,
                        id:3
                    },
                    {
                        name:"商品4",
                        price:40,
                        number:4,
                        id:4
                    },
                ]
            },
            methods:{
                getSum(){
                    //函数计算中的状态改变后，函数会自动执行一遍
                    var sum = 0;
                    for(var i in this.checkgroup){
                        sum+=this.checkgroup[i].number*this.checkgroup[i].price;
                    }
                    return sum;
                },
                handleChange(){
                    if(this.isChecked){
                        this.checkgroup = this.datalist;
                    }else{
                        this.checkgroup = [];
                    }
                },
                handleLiChange(){
                    if(this.checkgroup.length==this.datalist.length){
                        this.isChecked = true;
                    }else{
                        this.isChecked = false;
                    }
                },
                handleDelClick(data){
                    var number = data.number--;
                    if(number==0){
                        data.number = 0;
                    }
                }
            }
        })