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...