前言
相信大家都使用过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: {//点击事件 通过传参拿到每一条的idonPitch(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>
vue循环渲染多个标签 通过点击标签 标签样式改变 再次点击取消且可点击多个并选中多个标签
