Vue.js实现checkbox的全选和反选
2017-04-18 20:05
477 查看
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.
类型:
详细:
一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用
示例:
1.html
<template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选 <template v-for='checkb in checkboxData'> <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}} </template> </div> </template>
2.js
<script> export default { methods:{ checkedAll: function() { var _this = this; console.log(_this.checkboxModel); if (this.checked) {//实现反选 _this.checkboxModel = []; }else{//实现全选 _this.checkboxModel = []; _this.checkboxData.forEach(function(item) { _this.checkboxModel.push(item.id); }); } } }, watch: {//深度 watcher 'checkboxModel': { handler: function (val, oldVal) { if (this.checkboxModel.length === this.checkboxData.length) { this.checked=true; }else{ this.checked=false; } }, deep: true } }, data () { return { checkboxData:[{ id:'1', value:'苹果' },{ id:'2', value:'荔枝' },{ id:'3', value:'香蕉' },{ id:'4', value:'火龙果' }], checkboxModel:['1','3','4'], checked:"" } } } </script>
3.watch
类型: Object
详细:
一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用
$watch()。
示例:
var vm = new Vue({ data: { a: 1 }, watch: { 'a': function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 'b': 'someMethod', // 深度 watcher 'c': { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1
相关文章推荐
- 使用vue.js实现checkbox的全选,和多个的删除
- Vue.js实现checkbox的全选和反选
- 利用Vue.js实现checkbox的全选反选效果
- vue.js实现checkbox全选
- 使用vue.js实现checkbox的全选和多个的删除功能
- Vue.js实现checkbox的全选和反选
- 使用vue.js实现checkbox的全选和多个的删除功能
- 使用vue.js实现checkbox的全选,和部分删除,部分提交
- Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行
- js实现datalist中checkbox全选或取消
- 两个Repeater,里面的checkbox实现全选JS
- JS:&quot;全选&quot;功能实现(checkbox)
- JS在GridView中实现CheckBox全选和非全选 及Gridview批量删除使用技巧
- js操作CheckBoxList实现全选、反选
- JS 实现GridView中CheckBox全选
- 用JS实现CheckBox的全选 修改 取消 查询 删除的函数
- JS实现checkbox全选功能
- 通过js实现将所当页的checkbox全选 并且获取其value值
- js操作CheckBoxList实现全选、反选
- js在repeater控件内每一行<input type="checkbox"/>实现全选,全不选,然后获取每一行的ID删除