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

最新推荐文章于 2024-08-20 12:05:27 发布

干了这碗小米汤儿

最新推荐文章于 2024-08-20 12:05:27 发布

阅读量1w

点赞数 10

分类专栏： vue 文章标签： vue 多个选项高亮动态添加类名

本文链接：https://blog.csdn.net/MtangEr/article/details/87988510

版权

vue 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

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

方法中用到了indexOf 根据value 内容值，找到了对应在数组中的下标，（等于-1数组中没有这个值）
然后，从数组中删除就是splice（从下标开始，删除长度为1）

而上边动态添加类名也是根据在数组中判断 arr.indexOf（‘xxx’）是否为-1 (是-1，说明数组中没有匹配到改内容（动态添加类名的条件判断为false），反之亦然)

啦啦啦好啦，这样效果就实现了~