vue 标签点击切换颜色

1单选

<template>中

<!--单选标签-->
<div class="course-box">
  <div v-for="(target,id) in tagList" :key="id" @click="choseprofrom(id)">
    <div  class="course-box-item"  v-bind:class="{'secectBackground':flag==id}">{{target.name}}</div >
  </div>
</div>

<script>中

tagList:[
  {name:"标签1",id:1,},
  {name:"标签2",id:2,},
  {name:"标签3",id:3,},
  {name:"标签4",id:4,},
  {name:"标签5",id:5,},
  ],

data() {
  return {

flag: -1,

}}

methods:{

choseprofrom:function (id) {
  this.flag = id;
}

}

<style>中

.course-box{
  display: flex;
  flex-wrap: wrap;
  margin-top: 25/75rem;

  .course-box-item {
    height: 80/75rem;
    padding-left: 67/75rem;
    padding-right: 67/75rem;
    border-radius: 4px;
    border: 2/75rem solid #666666;
    margin-right: 20/75rem;
    margin-bottom: 20/75rem;
    color: #666666;
    font-size: 36/75rem;
    align-items: center;
    display: flex;
  }
  .secectBackground{
    height: 80/75rem;
    padding-left: 67/75rem;
    padding-right: 67/75rem;
    border-radius: 4px;
    border: 2/75rem solid #C81623;
    margin-right: 20/75rem;
    margin-bottom: 20/75rem;
    color: #C81623;
    font-size: 36/75rem;
    align-items: center;
    display: flex;

  }
}

//多选

<!--标签-->
<div class="course-box">
  <div v-for="(target,index) in tagList" :key="index" @click="choseprofrom(target)">
    <div  class="course-box-item"  v-bind:class="{secectBackground:target.checked}">{{target.name}}</div >
  </div>
</div>

data() {
  return {
    flags: [],
  }
}

点击事件

choseprofrom:function (item) {
  let that = this
  if(typeof item.checked=='undefined'){
    this.$set(item,"checked",true)
  }else{
    item.checked=!item.checked;
  }
  if(item.checked){
      that.flags.push(item.id)
  } else {
    for(var i = 0;i<that.flags.length;i++){
      if(that.flags[i] === item.id){
        that.flags.splice(i,1)
      }
    }
  }
}