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

实现效果

也可以用与其他组件

如：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue点击切换颜色的方法

    如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>

  • vue动态绑定class选中当前列表变色的方法示例

    vue动态绑定class选中当前列表变色的方法示例

    这个小技巧在工作当中是非常实用而且经常用到的  希望小伙伴儿们能学到. 先看看效果图吧 接下来我们看看怎么实现的吧 在methods中写入一个方法 clickcategory(index){ // 这里我们传入一个当前值 this.categoryIndex = index } 然后需要在data里面注册一下 data() { return { categoryIndex: 0, //点击当前背景变成白色索引 } }, 在css中设置我们当前选中项为active的类名,并给与一个白色的背景颜色

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

  • Vue实现点击当前行变色

    Vue实现点击当前行变色

    本文实例为大家分享了Vue实现点击当前行变色的具体代码,供大家参考,具体内容如下 话不多说,先上效果 默认第一行为红色,当点击第二行的时候,只有第二行变为红色 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:

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

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

    目录 vue单选按钮,选中改变其当前按钮颜色 vue一组按钮的选中样式的设置 定义一组按钮,添加点击事件 定义一些变量 实现点击事件 css设置 实现效果 也可以用与其他组件 vue单选按钮,选中改变其当前按钮颜色 html:  <span v-for="(item,index) in state" :key="index"   @click="leftChange(index)"    :class="{ liBackgroun

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • jQuery模仿单选按钮选中效果

    jQuery模仿单选按钮选中效果

    刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可. 而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可.鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天. css如下: &l

  • 当vue路由变化时,改变导航栏的样式方法

    当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

  • vue实现移动端拖拽悬浮按钮

    vue实现移动端拖拽悬浮按钮

    目录 功能介绍: 大致需求: 整体思路: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 本文实例为大家分享了vue实现移动端拖拽悬浮按钮的具体代码,供大家参考,具体内容如下 功能介绍: 在移动端开发中,实现悬浮按钮在侧边显示,为不遮挡页面内容,允许手指拖拽换位. 大致需求: 1.按钮在页面侧边悬浮显示:2.手指长按按钮,按钮改变样式,允许拖拽改变位置:3.按钮移动结束,手指松开,计算距离左右两侧距离并自动移动至侧边显示:4.移动至侧边后,按钮根据具

  • vue.js选中动态绑定的radio的指定项

    vue.js选中动态绑定的radio的指定项

    上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch

  • vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e

  • jquery判断checkbox是否选中及改变checkbox状态的实现方法

    jquery判断checked的三种方法: .attr('checked):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false .prop('checked'): //16+:true/false .is(':checked'):    //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几种写法: 所有的jquery版本都可以这样赋值: // $("#cb1&qu

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • vue实现路由切换改变title功能

    由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的 那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示 ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── common │ └── constants.j

随机推荐