这篇文章给大家分享的是有关vue如何实现全选和反选功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
vue实现全选反选功能的具体代码，具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.js"></script> <body> <div id = "test"> <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选 <div v-for='checkb in checkboxData'> <input type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'> {{checkb.value}} </div> </div> </body> <script> var vue = new Vue({ el:"#test", data:{ checkboxData:[ { id:'1', value:'苹果' },{ id:'2', value:'荔枝' },{ id:'3', value:'香蕉' },{ id:'4', value:'火龙果' } ], checkBox:{ checked:false, items:{} } }, methods:{ checkedAll: function() { var _this = this; console.log(_this.checkboxData); console.log(this.checkBox.items); this.checkboxData.forEach(function (item) { console.log(item.id); _this.checkBox.items[item.id] = _this.checkBox.checked; console.log(_this.checkBox.items); }); //实现反选 }, checkItem:function(){ var unchecked = 0; var _this = this; this.checkboxData.forEach( function(item) { unchecked += (! _this.checkBox.items[item.id]) || 0; }); _this.checkBox.checked = unchecked > 0 ? false : true; } } }) </script> </html>感谢各位的阅读！关于“vue如何实现全选和反选功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
