温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue单选按钮选中怎么改变其当前按钮颜色

发布时间:2022-07-29 09:43:15 阅读:230 作者:iii 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍了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一组按钮的选中样式的设置

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

vue单选按钮选中怎么改变其当前按钮颜色

<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>

定义一些变量

vue单选按钮选中怎么改变其当前按钮颜色

tabs: ['BDL''EL''FL''IBL''RN''WS'],
chooseIndex: 0

实现点击事件

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

css设置

vue单选按钮选中怎么改变其当前按钮颜色

.nav-tabs{
  list-style: none;
  margin0px;
  padding0px;
  width: auto;
  overflow: hidden;
}
.nav-item {
  float: left;
  background#999999;
  width: auto;
  height35px;
}
.nav-item a {
  width81px;
  height35px;
  font-size13px;
  line-height35px;
  text-decoration: none;
  padding11px 34px;
}
.nav-item a:hover.nav-item a.active {
  background-color#fafafa;
  color#000;
}

实现效果

vue单选按钮选中怎么改变其当前按钮颜色

也可以用与其他组件

如:

vue单选按钮选中怎么改变其当前按钮颜色

vue单选按钮选中怎么改变其当前按钮颜色

关于“vue单选按钮选中怎么改变其当前按钮颜色”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue单选按钮选中怎么改变其当前按钮颜色”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×