vue实现点击不同盒子改变不同颜色（气泡选择框版）

<template>
  <div class="container">
    <div v-for="(item, id) in boxList" :key="id">
      <!-- 实现盒子单个改变不同色 -->
      <div :class="['box',Active===id?'borderColor':'']" :style="{'--color':colorList[id]}" @click="change(item,id)">
      </div>
      <!-- 实现盒子多个改变不同色 -->
       <div :class="['box',item.chang===true?'borderColor':'']" @click="change(item,id)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      boxList: [
        { textValue: '123', chang: false },
        { textValue: '123', chang: false },
        { textValue: '123', chang: false }
      ],
      colorList: ['red', 'skyblue', 'yellow'],
      Active: 0
    }
  },
  methods: {
    change (item, id) {
      this.Active = id
    }
    // change (item,id) {
    //   item.chang = !item.chang
    // }
  }
}
</script>

<style >
.container{
  display: flex;
}
.box {
  margin-left: 5px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.borderColor {
  border-color: var(--color);
  position: relative;
}
.borderColor::before{
   content: "";
  position: absolute;
  bottom: -6px;
  left: 20%;
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #fff;
  border-bottom-color:#fff;
  transform: rotate(45deg);
  z-index: 999;
}
.borderColor::after{
   content: "";
  position: absolute;
  bottom: -8px;
  left: 20%;
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: var(--color);
  border-bottom-color:var(--color);
  transform: rotate(45deg);
}
</style>