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