vue如何实现一个简单的全选、反选功能

介绍全选、反选功能在项目中还是很常用的，如下写了一个简单的全选、反选功能；页面结构构建根据自己的结构渲染页面（此代码仅为demo测试）<div id=“app”> <button @click=“handleAll”>全选</button> <button @click=“handleReverse”>反选</button> <ul> <li v-for="(item,index) in list" :key=“index” :class=“list1.includes(item) && ‘atL’"> <a href=“javascript:;” @click=“handleAdd(item)">{{item}}</a> </li> </ul></div>功能实现new Vue({ el:"#app”, data(){ return{ list:[1,2,3,4,5,6], list1:[], } }, methods:{ //手动选择 handleAdd(val){ let isHash = this.list1.findIndex(item=>val == item); if(isHash > -1){ this.list1.splice(isHash,1); }else{ this.list1.push(val); } }, //全部选择 handleAll(){ this.list1 = JSON.parse(JSON.stringify(this.list)); }, //反向选择 handleReverse(){ let c = []; this.list.forEach(item=>{ !this.list1.includes(item) && c.push(item) }) this.list1 = c; } },})效果演示https://codepen.io/voggen/pen…