vue踩坑之同时使用class切换选中状态和操作dom元素

<template>

   <div class="home">

   

    <div class="a1">

      <div  v-for="(item,index) in bhhi" :key="index">

        <el-button type="primary" @click="lop(index)" ref="lop">{{item}}</el-button>

      </div>

     

    </div>

    <div class="a2">

      <div   v-for="(item,index) in ki" :key="index">

        <el-button :class="{'act':index==indexx}" ref="akl" @click="lol(index)">{{item}}</el-button>

      </div>

      <!--

        注意：:class="{'act':index==indexx}"和操作don元素会由一个先后顺序  会先执行class然后执行ref操作dom元素，所有这两个尽量分开来写

             上面是用对象形式的class来做了一个按钮选中状态

      -->

    </div>

     <div  v-for="(item,index) in ki" :key="index">

          <button :class="{'act':index==indexx}" @click="lolp(index)">{{item}}</button>

     </div>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data(){

    return{

        bhhi:["jj","ff"],

        ki:['xx',"nn"],

        indexx:0

    }

  },

  created(){

   

 

  },

  methods:{

    lop(index){

          if(index==1){

            this.$refs.akl[1].disabled=true

          }else{

             this.$refs.akl[1].disabled=false

          }

    },

    lol(index){

      if(index==1){

            this.$refs.lop[1].disabled=true

          }else{

             this.$refs.lop[1].disabled=false

          }

           this.indexx=index

    },

     lolp(index){

    console.log(index)

      this.indexx=index

    }

   

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.a1{

  display: flex;

   margin-left: 50px;

}

.a2{

  display: flex;

  margin-top: 50px;

  margin-left: 50px;

}

.act{

  background-color: red;

}

</style>