一个简单的毫无难度的vue点击选项选中高亮，选中高亮的方法不少，看自己喜欢

<template>
  <div>
    <div>
      <div>电量 |
        <span class="easy" :class="{'demo':item.w}" @click='q1(item)' v-for="(item,index) in duixiang.box1">{{item.q}}</span>
      </div>
      <div>品牌 |
        <span class="easy" :class="{'demo':item.w}" @click='q2(item)' v-for="(item,index) in duixiang.box2">{{item.q}}</span>
      </div>
      <div>续航 |
        <span class="easy" :class="{'demo':item.w}" @click='q3(item)' v-for="(item,index) in duixiang.box3">{{item.q}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        duixiang:{
          box1:[{q:'8000',w:false},{q:'600',w:false},{q:'500',w:false}],
          box2:[{q:'华为',w:false},{q:'小米',w:false}],
          box3:[{q:'1H',w:false},{q:'2H',w:false},{q:'3H',w:false}],
        }
      }
    },
    methods:{
      q1(i){
        console.log(i);
        this.duixiang.box1.forEach((e) =>{
          e.w=false
        });
        i.w=true
      },
      q2(i){
        console.log(i);
        this.duixiang.box2.forEach((e) =>{
          e.w=false
        });
        i.w=true
      },
      q3(i){
        console.log(i);
        this.duixiang.box3.forEach((e) =>{
          e.w=false
        });
        i.w=true
      }
    }
  }
</script>
<style scoped>
  .easy{
    margin: 0px 10px;
    cursor: pointer;
  }
  .demo{
    color: red;
  }
</style>

有死宅程序员可以加个Q群，交流or摸鱼聊天：809758480