vue单选按钮,选中改变其当前按钮颜色
vue单选按钮,选中改变其当前按钮颜色
html:
<span v-for="(item,index) in state" :key="index"
@click="leftChange(index)"
:class="{ liBackground:changeLeftBackground == index}"> {{item}} </span>
css:
.liBackground { background: darkcyan; }
js:
1.
return {
changeLeftBackground: 0, //默认选中第一个
state:['兼职','全职','自由职业'],// 模拟数据 所有标签
}
2.
methods:{
leftChange(index) {
//当前的背景颜色赋给当前点击的索引
this.changeLeftBackground = index;
},
}
好了,根据上面做法我们就能很轻松的实现按钮的单选效果!
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!
版权声明:本文为qq_42957741原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。