vue單選按鈕選中怎么改變其當(dāng)前按鈕顏色

這篇文章主要介紹了vue單選按鈕選中怎么改變其當(dāng)前按鈕顏色的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue單選按鈕選中怎么改變其當(dāng)前按鈕顏色文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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" >
  <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)效果

也可以用與其他組件

如：

關(guān)于“vue單選按鈕選中怎么改變其當(dāng)前按鈕顏色”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue單選按鈕選中怎么改變其當(dāng)前按鈕顏色”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。