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