vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue单选按钮选中改变按钮颜色

vue单选按钮,选中如何改变其当前按钮颜色

作者:邱志刚

这篇文章主要介绍了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;
       },
}

好了,根据上面做法我们就能很轻松的实现按钮的单选效果!

vue一组按钮的选中样式的设置

定义一组按钮,添加点击事件

<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

实现点击事件

clickItem (index) {
  this.chooseIndex = index
  // 点击之后要做的事
}

css设置

.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;
}

实现效果

也可以用与其他组件

如:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

您可能感兴趣的文章:
阅读全文