vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

最新推荐文章于 2024-08-29 16:29:16 发布

郭玉齐

最新推荐文章于 2024-08-29 16:29:16 发布

阅读量5.2k

点赞数

分类专栏：笔记程序代码

本文链接：https://blog.csdn.net/qq706352062/article/details/99644557

版权

笔记同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

程序代码

17 篇文章 0 订阅

订阅专栏

vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

效果如下：

<div class="relFacilityTitcon">

                            <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
                        </div>

.padding .relWarp .relFacility .relFacilityTitcon {

        /* border: 1px solid red; */
        /* line-height: 20px; */
        padding: 0 .24rem;
        font-size :10px;
    }

    .padding .relWarp .relFacility .relFacilityTitcon i {
        
        /* height:20px; */
        display: inline-block;
        /* margin: 0 5px; */
        height: 20px;
        line-height: 20px;
        padding: 0 .16rem;
        /* width: auto; */
        font-size: 10px;
        color: #97979f;
        border-radius: 5px;
        border: 1px solid #97979f;
        margin-right: 10px;
        margin-top: 10px;
        font-style: normal;

        /* padding:1px 7px; */
        /* display: inline-block; */
    }
    .padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
        border: 1px solid orange;
        color: orange;
    }

    .padding .relWarp .relFacility .relFacilityTitcon i:last-child {
        margin-right: 0;
    }

  methods: {
           
            changeSpan(index){
                let arrIndex = this.spanIndex.indexOf(index);
                // console.log(arrIndex);
                
                if(arrIndex>-1){
                    this.spanIndex.splice(arrIndex,1);
                }else{
                    this.spanIndex.push(index);
                }
            },