我就廢話不多說，直接上代碼吧！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div style="padding-left: 20px"><ul style="margin-bottom: 20px"> <li v-for="(item, index) in proData"><input type="checkbox" :value="index" v-model="selectArr">{{item.name}}</li></ul><label> <input type="checkbox" @click="selectAll" :checked="checked"/>全選 </label> </div> </div></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el : "#app",data : {proData: [ { "name": "張三"}, { "name": "李四"}, { "name": "王五"}, { "name": "趙六"}], selectArr: [], checked : false},watch : { selectArr(curVal){ if(curVal.length == this.proData.length){ this.checked = true }else{ this.checked = false } } }, methods: { selectAll(event){ if (!event.currentTarget.checked) { this.selectArr = []; } else { //實現全選 this.selectArr = []; this.proData.forEach((item, i) =>{ this.selectArr.push(i); }); } } }})</script></html>如果有bug，請告知！
以上這篇vue 全選與反選的實現方法(無Bug 新手看過來)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
