脚本宝典收集整理的这篇文章主要介绍了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...点击预览

脚本宝典总结

以上是脚本宝典为你收集整理的vue如何实现一个简单的全选、反选功能全部内容，希望文章能够帮你解决vue如何实现一个简单的全选、反选功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。