vue中，选中多个选项，并且使其高亮

来自 https://blog.csdn.net/kielin/article/details/86649074 侵删

在vue中很常见的就是tab切换，选项卡切换，动态添加类名使选项卡选中高亮，对应内容切换，方法大家应该非常熟悉了，
现在提到一种，可以多选多个选项的，效果如下图

 

 

贴上代码

<div class="zxlybox">
    <p>请选择领域 <span>（可多选）</span></p>
    <ul>
        <li class="zxlybtn" :class="{zxlybtn2:chooseAfterValue.indexOf( item.text )!=-1}" v-for="(item,index) in lyList" :key="index" @click="choosely(index,item.text)">
            <span>{{item.text}}</span>
            <img v-if="chooseAfterValue.indexOf( item.text )!=-1" src="../../../static/img/close.png" alt="">
        </li>
    </ul>
    <p class="btn"><span @click="xzly">取消</span><span @click="sure">确定</span></p>
</div>

export default {
    name:'enter',
    data(){
        return{
            lyList:[
                {text:'绘画'},
                {text:'书法'},
                {text:'陶瓷'},
                {text:'紫砂'},
                {text:'玉石'},
                {text:'金属'},
                {text:'雕塑'},
                {text:'宗教'},
                {text:'文玩'},
                {text:'非遗'},
                {text:'杂项'},
            ],
            chooseAfterValue:[],
         }
     }，
     methods：{
         choosely(n,value){
                if(this.chooseAfterValue.indexOf( value )!=-1){
                    this.chooseAfterValue.splice( this.chooseAfterValue.indexOf( value ), 1 )
                }else{
                    this.chooseAfterValue.push(value)
                }
            },
     }
}
————————————————
版权声明：本文为CSDN博主「干了这碗小米汤儿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MtangEr/java/article/details/87988510

 

 

<div class="tap-hy">
                    <div class="tap-hy-title">
                        行业分类
                    </div>
                    <div class="tap-hy-cont">
                        <!-- <span>其他</span>
                        <span>科技</span>
                        <span>工业</span>
                        <span>制造</span>
                        <span>服务</span>
                        <span>农业</span>
                        <span>电子商务</span>
                        <span>金融业</span>
                        <span>建筑业</span>
                        <span>文化创意</span>
                        <span>软件</span>
                        <span>旅游</span> 
                        <span>物流业</span> -->
                        <span v-for="(item,index) in policyList" :class="{'active':policyHangye.indexOf(item)>-1}"
                            @click="changeState('policyHangye',item)">{{item}}</span>
                    </div>
                </div>

policyList: ['其他', '科技', '工业', '制造', '服务', '农业', '电子商务', '金融业', '建筑业', '文化创意', '软件', '旅游', '物流业',],

changeState(str, val) {
                    console.log(str, val)
                    if (this[str].indexOf(val) >= 0) {
                        this[str].splice(this[str].indexOf(val), 1)
                    }
                    else {
                        this[str].push(val)
                    }
                    this.handleBtn(1)
                    // console.log(this[str])
                },
                handleBtn(num) {
                console.log(num,123455)
                    this.currPage = 1;
                    if(num){
                        this.currPage = num;
                    }
                    var param = {
                        currPage: this.currPage,
                        pageSize: this.pageSize,
                        policyHangye: this.policyHangye.join(','),
                        contentType: this.contentType.join(','),
                        policyScale: this.policyScale.join(','),
                        policyEnterpriseType: this.policyEnterpriseType.join(','),
                        city: this.city.join(','),
                        enterpriseCode: this.enterpriseCode,
                        enterpriseResult: this.enterpriseResult
                    }
                    if (this.companyName != '') {
                        this.getSignList(this.companyName)
                    }
                    // else if (param.policyHangye != '' || param.contentType != '' || param.policyScale != '' || param.policyEnterpriseType != '' || param.city != '') {
                    else {
                        this.getEnterpriseList(param)
                    }
                    // }
                },