自定义vue 项目 多选标签的样式切换

js

 taglist:['132311','13221','132121','1321213','1322132131','311','1321e3324'],

      tagIndex:[],

      isTag:false, //标签消失隐藏

    methods:{

        overShow(){

        },

        outHide:function(){

        },

        filter:function(){

            if(!this.isTag){

              this.isTag = true

            }else{

             this.isTag = false

            }

        },

        handleSizeChange(val) {

            console.log(`每页 ${val} 条`);

          },

          handleCurrentChange(val) {

            console.log(`当前页: ${val}`);

          },

          changeTag(index){

            let arrIndex = this.tagIndex.indexOf(index);

            // console.log(arrIndex);

            if(arrIndex>-1){

                this.tagIndex.splice(arrIndex,1);

            }else{

                this.tagIndex.push(index);

            }

        }

    },

html

   <!-- //搜索card -->

                    <div class="filter-card" v-show='isTag'>

                        <div class="card-list">

                            <span class="card-item" 

                            :class='{"active":tagIndex.indexOf(index)>-1}'

                             v-for='(item,index) in taglist' :key='index' @click='changeTag(index)'> 

                                {{item}}

                            </span>

                        </div>

                    </div>