效果:
点击不同的按钮,该按钮进行高亮,并且下方的数字对应改变
实现代码:
<template>
<div>
<h3>样式改变</h3>
<button v-for="(item,index) in btn"
:key="item"
style="margin-right:10px"
@click="getIndex(index)"
:class="{btn:index == num}"
>
{{item}}
</button>
<div class="hello">
<div v-for="(ele,index) in content" :key="ele" :class="{ show :index == num}" class="hid">
{{ ele }}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
btn:["按钮1", "按钮2", "按钮3"],
content: ["111", "222", "333",],
num:0,
flag : false
}
},
methods:{
getIndex(index){
this.num = index;
}
}
}
</script>
<style>
.hello{
width: 200px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
.btn{
background-color: aqua;
}
.hid{
display: none;
}
.show{
display: block;
}
</style>