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判断全选值的状态,来改变购物车数据的状态


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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 详情页面 packagecom.example.shoppingcar; importandroid.conten...
    ForCrazyLove阅读 596评论 0 2
  • 今天根据京东购物车截图,实现下面框出来的几个简单功能。 一、vue环境的搭建和项目新建 这里可以看我之前的文章vu...
    Mango97阅读 6,823评论 1 2
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,280评论 0 25
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,763评论 1 17
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,258评论 0 6