vue實現全選和取消全選
阿新 • • 發佈:2018-02-24
urn lis put lan model set type itl scale
很簡單使用的vue全選和取消全選
直接上代碼,簡單易懂不懂得可以留言。
<!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>checkboxAll</title> </head> <body> <div id="app"> <ul class="checkboxs"> <li > <label>{{checkAllTxt}}<input type="checkbox" v-model="checked" @click= "checkboxAll($event)"></label> </li> <li v-for=‘list,index in lists‘> <label>{{list.name}}<input type="checkbox" v-model="checkStatusArr[index]"></label> </li> </ul> </div> <script src="../vue.js"></script> <script> window.onload = function () { var vm = new Vue({ el: ‘#app‘, data: { lists: [ { ‘name‘: ‘張三‘ }, { ‘name‘: ‘李四‘ }, { ‘name‘: ‘王五‘ }, { ‘name‘: ‘趙六‘ } ], checked: false, checkStatusArr: [] }, methods: { checkboxAll (event) { this.checkStatusArr = []; if (event.currentTarget.checked) { let len = this.lists.length; for (let i = 0; i < len; i++) { this.checkStatusArr.push(1);// 1 ==true } } else { this.checkStatusArr = []; } } }, watch: { checkStatusArr (val, oldVal) { if (val.length > 0) { this.checked = true; } else { this.checked = false; } } }, computed: { checkAllTxt () { if (this.checked === true) { return ‘全不選‘; } else { return ‘全選‘; } } } }); }; </script> </body> </html>
vue實現全選和取消全選