Vue：選中商品規格改變字體和邊框顏色（默認選中第一種規格）

效果圖：

CSS：

<div class="label">
    <p>標簽類別</p>
    <ul>
        <li v-for="(item, idx) in list1" :key="idx" :class="{ specColor:changeColor1 === idx}" @click="changeSpec(1,idx)">
        <button class="but1">{{item.label}}</button>
        </li>
    </ul>
</div>
<div class="label">
    <p>標簽類別</p>
    <ul>
        <li v-for="(item, idx) in list1" :key="idx" :class="{ specColor:changeColor2 === idx}" @click="changeSpec(0,idx)">
        <button class="but1">{{item.label}}</button>
        </li>
    </ul>
</div> 

JS：

<script>
  export default {
    name: 'detailsOfGoods',
    data () {
      return {
        changeColor1: 0,
        changeColor2: 0,
      }
    },
    methods: {
      /*
      * 選中商品規格
      */
      changeSpec (i, idx) {
        if (i) {
          this.changeColor1 = idx
        } else {
          this.changeColor2 = idx
        }
      }
    }
  }
</script>

樣式：

<style scoped lang="less">
    .specColor .but1{
        color: #e94d3e;
        border: solid 1px #e94d3e;
      }
</style>