Vue 移动端购物车页全选反选简单实现及判断

Vue 移动端购物车页全选反选简单实现及判断

data(){

        return{

            goodlist:[],//与后台交互获取的当前用户购物车商品列表

            checkedNames:[],//选中的商品

        }

    },

computed:{/

        isall:function(){ //添加一个计算属性，判断选中列表的length是否和data的length相等，如果相等，这个计算属性的值设置为true，反之设置为false

            if(this.checkedNames.length > 0 && this.checkedNames.length === this.goodlist.length){

                return true

            }

            else{

                return false

            }

        }

}

checkbox的v-model绑定checkedNames；

全选事件：

checkAll:function(){ //全选按钮

            if(this.checkedNames.length >=0 && this.isall == false){

                let length = this.goodlist.length;

                let checkAllgood = []

                for(let i = 0;i

                    checkAllgood.push(i)

                }

                this.checkedNames = checkAllgood

                // this.isall = true

            }

            else if(this.isall == true){

                // this.isall = false

                this.checkedNames.splice(0,this.checkedNames.length)               

            }           

        }