<button
v-for="(item,index) in tagList"
:key="index"
:class="active==index ? 'activeClass1' : 'activeClass2' "
@click="selected(index)">
{{ item.name}}
</button>
tagList:[
{
name:" 111"
},
{
name:" 222"
},
{
name:" 333"
}, {
name:" 444"
}
],
active: 0,
selected(index){
//把index值赋给active,点击改变样式
this.active=index;
}
`` .activeClass1 {
margin-left: 20px;
background-color: red;
width: 200px;
height: 80px;
color: white;
font-size: 20px
}
.activeClass2 {
margin-left: 20px;
background-color: green;
width: 200px;
height: 80px;
color: white;
font-size: 20px
}`
09-22
4685
10-11
2312
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交