vue單選按鈕,選中如何改變其當(dāng)前按鈕顏色
更新時(shí)間：2022年07月28日 15:59:15 作者：邱志剛
這篇文章主要介紹了vue單選按鈕,選中如何改變其當(dāng)前按鈕顏色。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue單選按鈕，選中改變其當(dāng)前按鈕顏色
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, ? ?//默認(rèn)選中第一個(gè)
?? ??? ? ? ? ? ? ?state:['兼職','全職','自由職業(yè)'],// 模擬數(shù)據(jù) 所有標(biāo)簽
?? ??? ?}2.
?methods:{
?? ? ?leftChange(index) {
?? ? ??? ??? ?//當(dāng)前的背景顏色賦給當(dāng)前點(diǎn)擊的索引
? ? ? ? ? ? ?this.changeLeftBackground = index;
? ? ? ?},
}好了，根據(jù)上面做法我們就能很輕松的實(shí)現(xiàn)按鈕的單選效果！
vue一組按鈕的選中樣式的設(shè)置
定義一組按鈕，添加點(diǎn)擊事件
<ul class="nav nav-tabs" style="background: white;text-align: center">
<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
實(shí)現(xiàn)點(diǎn)擊事件
clickItem (index) {
this.chooseIndex = index
// 點(diǎn)擊之后要做的事
}css設(shè)置
.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;
}實(shí)現(xiàn)效果
也可以用與其他組件
如：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)）
本篇文章主要介紹了詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡(jiǎn)單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue3實(shí)現(xiàn)表單輸入的雙向綁定的示例代碼
Vue.js 是一個(gè)漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項(xiàng)非常核心的概念,尤其是在處理表單輸入時(shí),它使得數(shù)據(jù)和用戶界面之間的互動(dòng)變得簡(jiǎn)單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實(shí)現(xiàn)表單輸入的雙向綁定2025-01-01
Vue之修改數(shù)據(jù)頁(yè)面不更新的問(wèn)題
這篇文章主要介紹了Vue之修改數(shù)據(jù)頁(yè)面不更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
VUE 解決mode為history頁(yè)面為空白的問(wèn)題
今天小編就為大家分享一篇VUE 解決mode為history頁(yè)面為空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue nextTick的原理解析，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無(wú)需離開(kāi)界面，也無(wú)需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
vue如何通過(guò)ref調(diào)用router-view子組件的方法
這篇文章主要介紹了vue?通過(guò)ref調(diào)用router-view子組件的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01