vue 实现按钮多选和反选

效果如下：点击选中，再次点击反选，我做的项目是弹框，请按实际需要去掉弹框样式，其中@c-main代表的颜色是 #c6ae6c

代码如下：

<template>
    <!--推荐人弹窗-->
    <div class="sourcePop">
        <div class="sourcePopContent">
            <p class="title">推荐人选择</p>
            <div class="selectBody">
                <ul>
                    <li class="degreeBtn" @click="chooseItem($event,'引流')">引流</li>
                    <li class="degreeBtn" @click="chooseItem($event,'设计')">设计</li>
                    <li class="degreeBtn" @click="chooseItem($event,'施工')">施工</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SourcePop',
    data () {
        return {
            refereeArr: []
        }
    },
    methods: {
        chooseItem (e, text) {
            if (e.target.className.indexOf('deegreeSelect') === -1) {
                e.target.className = 'degreeBtn deegreeSelect' // 选中
                this.refereeArr.push(text)
            } else {
                e.target.className = 'degreeBtn'// 反选
                for (var i = 0; i < this.refereeArr.length; i++) {
                    if (this.refereeArr[i] === text) {
                        this.refereeArr.splice(i, 1)
                        break
                    }
                }
            }
            console.log(this.refereeArr)
        }
    }
}
</script>

<style lang="less" scoped>
@import (reference) "~less/base.less";
    /*推荐人弹窗*/
    .sourcePop{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: rgba(0,0,0,.4);
        z-index: 100;
        .sourcePopContent{
            width:6.7rem;
            height:4.6rem;
            background: #fff;
            border-radius: 0.08rem;
            margin:2rem auto;
            position: relative;
            padding-top: 0.6rem;
            .title{
                font-size:0.48rem;
                line-height: 0.68rem;
                color:@c-main;
                text-align: center;
            }
            .selectBody{
                padding: 0.4rem 0.2rem;
                ul{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .degreeBtn{
                        width: 1.6rem;
                        height: 0.8rem;
                        line-height: 0.8rem;
                        text-align: center;
                        border: 1px solid @c-main;
                        background: #fff;
                        font-size: 0.28rem;
                        color: @c-main;
                        border-radius: 4px;
                    }
                    .deegreeSelect{
                        background: @c-main;
                        color: #fff;
                    }
                }
            }
        }
    }

</style>

卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云