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

目录

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

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

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

定义一些变量

实现点击事件

css设置

实现效果

也可以用与其他组件

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; } 实现效果

也可以用与其他组件

如:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读

    电脑无线网按钮|电脑无线网按钮在哪

    电脑无线网按钮|电脑无线网按钮在哪,,电脑无线网按钮在哪1、翻看路由器底部铭牌或使用说明书,找到路由器IP、默认帐号及密码;2、打开浏览器,

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    联想一键还原5.0|联想一键还原按钮

    联想一键还原5.0|联想一键还原按钮,,联想一键还原按钮1、关机状态下,按下一键恢复键,进入一键恢复主界面;2、选择“从初始备份恢复”将电脑系

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    shop裁剪快捷键|剪裁按钮的快捷键

    shop裁剪快捷键|剪裁按钮的快捷键,,1. 剪裁按钮的快捷键  电脑键盘剪切快捷键是2个按键的组合键,同时按Ctr l+ X 即可剪切。剪切快捷键使

    cad设备中心快捷键|cad快捷按钮

    cad设备中心快捷键|cad快捷按钮,,1. cad快捷按钮1、按Fn+F8就跟锁定大写字母情况下,按SHIFT键输入的就是小写字母一一样,在Fn键被锁定的情况

    提交按钮快捷键|保存提交快捷键

    提交按钮快捷键|保存提交快捷键,,1. 保存提交快捷键1.打开word,然后在文档中输入要求的内容。2.保存word文档可以点击左上角的保存的标志