vue实现多标签可点击选中和样式变化

我们在前端vue框架项目里，经常会用到如下图所示，要实现评价多个标签可点击、可以选中、同时样式还要变化，也就是加高亮下，其实实现这些功能不难的哦，具体看我写的实例代码吧。

html代码：

<view class="tag">
    <text class="form-title">请选择标签：</text>
    <view class="flex justify-between flex-wrap">
        <view class="tag-item flex justify-center align-center" 
         :class="{active: gather.includes(item.id)}"
         v-for="(item, index) in lists" :key="index"
         @tap="onPitch(item.id)">
            <text class="tag-item-text">{{item.value}}</text>
        </view>
   </view>
</view>

js代码：

lists: [
    { value: "非常专业", id: "1" },
    { value: "服务好", id: "2" },
    { value: "技术一流", id: "3" },
    { value: "准确", id: "4" },
    { value: "回复快", id: "5" },
    { value: "耐心", id: "6" },
],
gather: [],
stringList: null,

onPitch(id) {
    if (this.gather.includes(id)) {
        this.gather.splice(this.gather.indexOf(id), 1);
    } else {
        this.gather.push(id);
    }
    let a =[]
    this.gather.forEach(item=> {
        a.push(this.lists[item-1].value)
    })
    this.stringList = a.join(',');
    console.log(this.stringList, "选中集合");//
},