Part.1 问题

如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢?

Part.2 思路

为当前点击的按钮添加一个 单独的类名,我的做法:

.active {
background: #3C8DBC;
color: white
}
为当前点击的按钮添加一个 .active 类,但是在每次为当前点击的按钮添加类名时,其它的按钮需要删除 .active 类名才行

Part.3 解决

每次点击时先 remove 掉按钮的 .active 类,  然后单独给当前点击按钮添加 .active。 如何在点击时,获取当前元素信息?  vue 关键字 $event

Vue 点击事件怎么传递 this ?的更多相关文章

  1. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  2. Vue点击事件失效

    在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发.原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上cl ...

  3. vue 点击事件唤醒QQ

    window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=QQ号' window.location.href = 'http://wpa. ...

  4. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

  5. app内嵌vue h5,安卓和ios拦截H5点击事件

    安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...

  6. 四种方式写按钮点击事件和Android 中常用的布局

    1.匿名内部类的方式 2.创建一个类实现onClickListener,实现onClick方法,设置控件点击时传一个类的对象 3.让当前类实现onClickListener,设置控件点击事件时传递一个 ...

  7. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  8. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

  9. 记录Vue和Jquery混合开发中关于点击事件的一个bug

    最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...

随机推荐

  1. Linux网络协议栈(三)——网络设备(1)

    网络设备(network device)是内核对网络适配器(硬件)的抽象与封装,并为各个协议实例提供统一的接口,它是硬件与内核的接口,它有两个特征:(1)    作为基于硬件的网络适配器与基于软件的协 ...

  2. 洛谷 P1082 同余方程 —— exgcd

    题目:https://www.luogu.org/problemnew/show/P1082 用 exgcd 即可. 代码如下: #include<iostream> #include&l ...

  3. 分析函数Ratio_to_report使用

    分析函数Ratio_to_report( ) over()使用说明 表中需要计算单项占比:比如单项在部门占比多少,单项在公司占比多少.特别是在财务单项计算,部门个人薪水计算上. Ratio_to_re ...

  4. DateTime?转化为DateTime,int? 转 int

    深入理解C#---1.可空类型 https://blog.csdn.net/tianzeyu1992/article/details/52618131 原文:https://blog.csdn.net ...

  5. vs2010 每行代码显示虚线

    快捷键:Ctrl+R,W或Ctrl+E,S,即可去除 或者是编辑菜单——高级——查看空白 VS12010代码编辑器横向滚动条 工具----选项-----文本编辑器---所有语言---右侧 自动换行去掉

  6. ExtJS 4 MVC 官方示例

    参考原文翻译地址:http://www.showframework.com/2012/07/extjs-mvc-architecture/ 效果图 代码结构: 源代码下载: http://hot.ba ...

  7. E20170516-gg

    accelerator  n. 加速器;油门 oscillator  n. 振荡器; 振子; oscillate  vt. 使振荡,使振动  vi. 持续周期性地摆动; frame  n. 框架; 边 ...

  8. Chrome应用商店打不开解决方法

    方法一.谷歌访问助手(推荐) 谷歌访问助手是一款免费的谷歌代理插件,不用配置即可打开Chrome应用商店,而且速度很不错. 1.根据自己使用的浏览器点击对应版本的插件.详细安装都在下面链接中. 下载地 ...

  9. python 匿名函数 lambda

    一.lambda使用语法: 关键字lambda表示匿名函数,冒号前面的x表示函数参数,冒号后面只能有一个表达式,不用写return,返回值就是该表达式的结果. >>> list(ma ...

  10. python爬虫抓取哈尔滨天气信息(静态爬虫)

    python 爬虫 爬取哈尔滨天气信息 - http://www.weather.com.cn/weather/101050101.shtml 环境: windows7 python3.4(pip i ...