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)
                    }
                    // }
                },