vue循环渲染多个标签，通过点击标签，标签样式改变，再次点击取消且可点击多个并选中多个标签

Posted 2022-02-06 水星记_

前言

相信大家都使用过app的评价功能吧，那下面这张图片你应该很熟悉，今天我们要实现的就是这个需求。首先循环渲染后台返回的数据，这些标签可以点击，点击后会是另一套样式，再次点击恢复默认样式，同时，这些标签可以多选，最后将选中标签的id作为集合传给后台。

实现思路

1.首先循环遍历标签，然后我们要给标签加一个点击事件，并拿到每一个标签的 id(item.id) 作为参数传递到方法中；
2.点击标签时，通过 indexOf() 方法特性进行判断，如果大于-1，则是默认样式，反之则是第二套样式并将选中标签的 id 通过 push 方法添加到 data 中定义好的数组 (gather) 中；
3.因为后端人员想要的数据格式是字符串拼接的格式，所以最后我又通过 join 方法将数组转换成字符串并以逗号隔开，如果想要数组集合则不用转。

实战环节

下面是我写的一个小案例，大家可以直接复制粘贴到自己的项目中，借助代码和注释，可以更快帮助大家理解。

<template>
    <div class="tagBox">
        <!-- // v-for循环模拟的数组lists -->
        <div v-for="(item, index) in lists" :key="index" @click="onPitch(item.id)">
            <span class="tagContant" :class=" tagAlter: gather.indexOf(item.id) > -1 "> item.value </span>
        </div>
    </div>
</template>

<script>
    export default 
        data() 
            return 
                lists: [//模拟数据
                    value: '运行稳定',id: "85",
                    value: '快速响应',id: "23",
                    value: '售后及时',id: "12",
                    value: '解答专业',id: "78",
                ],
                gather: [], //选中集合数组
                stringList: null //选中集合数组转换成字符串
            ;
        ,
        methods: 
            //点击事件 通过传参拿到每一条的id
            onPitch(id) 
                let subscript = this.gather.indexOf(id); //indexOf:返回某个指定的字符串值在字符串中首次出现的位置
                if (subscript > -1) 
                    this.gather.splice(subscript, 1); //splice:用于添加或删除数组中的元素
                 else 
                    this.gather.push(id); //通过push方法将选中id添加到数组中
                
                this.stringList = this.gather.join(',') //转换成字符串并以逗号隔开
                console.log(this.stringList,"选中集合");
            
        
    ;
</script>

<style scoped>
    /* 最外层的大盒子样式 */
    .tagBox 
        display: flex;
        padding: 0px 8px;
    

    /* 默认的样式 */
    .tagContant 
        display: flex;
        align-content: center;
        justify-content: center;
        font-size: 14px;
        width: 80px;
        padding: 3px 0px;
        color: rgb(161, 161, 161);
        border: 1px solid rgb(161, 161, 161);
        border-radius: 4px;
        margin: 10px 4px;
    

    /* 点击后的样式 */
    .tagAlter 
        background-color: rgb(252, 242, 233);
        color: rgb(216, 122, 62);
        border: 1px solid rgb(216, 122, 62);
    
</style>