前言
這篇文章主要是跟大家分享了利用Vue.js實現checkbox的全選反選效果，之前寫的代碼存在一個bug,就是當你選擇全選的時候去掉后面的一個選項，再點全選結果就是反的了。后來很感謝朋友留言幫我改了這個問題嘻嘻,下面一起來看看具體是怎么實現的吧.
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>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>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總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
