vue的checkbox

vue的文档中提到了如何绑定checkbox的数据绑定

当只有单个checkbox时,所穿的checked值为逻辑值,仅为true和false

当checkedNames所绑定的值为数组时,被选中的input直接选取value值push到checkedNames中,得到一个选中值的数组

如何实现全选功能?

由于vue的双向数据绑定功能,当checkedNames中有对应的vlaue值,该项checkbox就会被默认选中

所以实现全选,只需要遍历checkedNames的值,将所有value添加进去即可,但实际项目中,value往往不是单纯有规律的数字,而是某些没有规律的字符串,在点击全选时,通过将所有的value赋值到checkedNames中,达到全选的效果。最后项目的做法是先从后台获取数组,checkbox中的value只是该项在数组中对应的位置,最终获取的checkedNames仅仅是一个坐标数组,拿到选取的坐标数组后,再遍历从后台拿到的数组,得到需要传到后台的数据,提交到后台。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,097评论 4 129
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,244评论 0 6
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,596评论 0 11
  • 由于转型,从中职转高职,自去年至今,参加了N多个培训,有线上的,更有线下的。培训内容杂七杂八,一言难尽。最喜欢的还...
    一念清宁阅读 582评论 1 3