[JavaScript知识库]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>