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>

 

转载于:https://www.cnblogs.com/Awen71815iou/p/11326300.html