效果如下：點選選中，再次點選反選，我做的專案是彈框，請按實際需要去掉彈框樣式，其中@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小時售後,伺服器只選阿里雲