介绍
全选、反选功能在项目中还是很常用的，如下写了一个简单的全选、反选功能；
页面结构构建
根据自己的结构渲染页面（此代码仅为 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…