这篇文章主要介绍了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;
},
}
好了,根据上面做法我们就能很轻松的实现按钮的单选效果!
<ul class="nav nav-tabs" >
<li v-for="(item,index) in tabs" :key="index" class="nav-item">
<a href="#" rel="external nofollow" data-toggle="tab" class="nav-link" @click="clickItem(index)" :class="{active:chooseIndex==index}">{{item}}</a>
</li>
</ul>
tabs: ['BDL', 'EL', 'FL', 'IBL', 'RN', 'WS'],
chooseIndex: 0
clickItem (index) {
this.chooseIndex = index
// 点击之后要做的事
}
.nav-tabs{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
overflow: hidden;
}
.nav-item {
float: left;
background: #999999;
width: auto;
height: 35px;
}
.nav-item a {
width: 81px;
height: 35px;
font-size: 13px;
line-height: 35px;
text-decoration: none;
padding: 11px 34px;
}
.nav-item a:hover, .nav-item a.active {
background-color: #fafafa;
color: #000;
}
如:
关于“vue单选按钮选中怎么改变其当前按钮颜色”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue单选按钮选中怎么改变其当前按钮颜色”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。