Vue购物车checkbox全选反选

在vuex中给数据添加了一个默认的状态（属性名：true或者false），将vueX中的数组lists:[ ]加入购物车，在computed中获取，return出vuex中的数据

computed:{ lists(){

                return this.$store.state.list

            },

        },

用v-model来双向绑定input控制checkbox是否选中。

给全选的checkbox绑定一个v-model=”fleg“我上图默认是true，在data中 fleg:true

<input type="checkbox" v-model="fleg">

在vue中，给checkbox绑定一个v-on:change()事件，当元素的值发生改变时，会发生 change 事件。下面的flag是我在数据里绑定的状态，通过v-for循环然后添加到input框里

<input type="checkbox" v-model="item.flag" @change="check">

在vue的data中创建一个数组checkDate:[ ]，在methods中写check()方法，在方法中用filter来过滤从VueX中的数据，将flag为true的添加到数组checkDate:[ ]中，通过if判断checkDate:[ ]数组和lists:[ ]数组的length，如果相同，就代表所有购物车数据的input都是true,控制data中的数据fleg使全选按钮选中，反之则全选按钮没选中，只要有一个数据没选中，全选按钮就没选

然后给全选按钮设置一个v-on:change事件

<input type="checkbox" v-model="fleg" @change="checkAll">

在方法中用for循环遍历购物车数组lists:[ ], 通过if判断全选值的状态，来改变购物车数据的状态

全选反选就弄完了，嘿嘿😊，第一次写，请多指教！