vue三種方式實現：全選、反選、全不選
阿新 • • 發佈：2019-01-01
方法一：v-model 與 [{checked:true},…]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click="checkAnti">反選</button> <button @click="checkAll">全選</button> <button @click="checkNone">全不選</button> 喜好: <div v-for="item in inputArr"> {{item.text}} : <input type="checkbox" value="" v-model="item.checked"> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: function () { return { inputArr: [ { text: '足球', checked: true }, { text: '籃球', checked: false }, { text: '羽毛球', checked: false }, { text: '游泳', checked: false }, ], } }, methods: { checkNone() { this.inputArr.forEach(item => { item.checked = false; }); }, checkAll() { this.inputArr.forEach(item => { item.checked = true; }); }, checkAnti() { this.inputArr.forEach(item => { item.checked = !item.checked; }); } } }) </script> </html>
方法二: v-model結合v-for,遍歷[true,false,…]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click="checkAnti">反選</button> <button @click="checkAll">全選</button> <button @click="checkNone">全不選</button> 喜好: <div v-for="(item,idx) in checkArr"> <input type="checkbox" value="" :checked="checkArr[idx]"> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: function () { return { checkArr: [true, false, false, false], } }, methods: { checkNone() { this.checkArr = this.checkArr.map(item => item = false); // ps:this.checkArr.forEach(item => item = false);無效,求大神解答~ }, checkAll() { this.checkArr = this.checkArr.map(item => item = true); }, checkAnti() { this.checkArr = this.checkArr.map(item => item = !item); } } }) </script> </html>
方法三.利用複選框checked屬性
ps:分別繫結兩種資料結構,都可以實現哦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click="checkAnti">反選</button> <button @click="checkAll">全選</button> <button @click="checkNone">全不選</button> 喜好: <!-- <div v-for="(item,idx) in checkArr"> <input type="checkbox" value="" :checked="checkArr[idx]"> </div> --> <div v-for="(item,idx) in inputArr"> <input type="checkbox" value="" :checked="item.checked"> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: function () { return { inputArr: [ { text: '足球', checked: true }, { text: '籃球', checked: false }, { text: '羽毛球', checked: false }, { text: '游泳', checked: false }, ], // checkArr: [true, false, false, false], } }, methods: { checkNone() { this.inputArr.forEach(item => { item.checked = false; }); // this.checkArr = this.checkArr.map(item => item = false); }, checkAll() { this.inputArr.forEach(item => { item.checked = true; }); // this.checkArr = this.checkArr.map(item => item = true); }, checkAnti() { this.inputArr.forEach(item => { item.checked = !item.checked; }); // this.checkArr = this.checkArr.map(item => item = !item); } } }) </script> </html>