<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>