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. Java抽象类和接口的区别(好长时间没看这种文章了)

    Java抽象类和接口的区别(好长时间没看这种文章了) abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的 ...

  2. 浅入分析和Linux内核相关的文件夹/proc和/sys .

    近来文章被踩的厉害,我只想把自己从马哥学的知识自己总结下发到博客里,但是没想到昨天一篇文章刚发一上午被踩了9次...如果您真的觉得我的文章很烂,请告诉我原因,不胜感激. 这星期,马哥讲了关于Linux ...

  3. Codeforces Round #382 (Div. 2) (模拟|数学)

    题目链接: A:Ostap and Grasshopper B:Urbanization C:Tennis Championship D:Taxes 分析:这场第一二题模拟,三四题数学题 A. 直接模 ...

  4. svn报错:privious operation has not finshed;run 'cleanup' if it was interrupted

    在更新svn的过程中,可能中途会取消,取消之后再次更新时可能提示,如下图: 下载sqlite3工具,进入此下载地址:https://www.sqlite.org/download.html 将sqli ...

  5. bzoj 2208: [Jsoi2010]连通数【tarjan+拓扑+dp】

    我总觉得枚举点bfs也行-- tarjan缩点,记一下每个scc的size,bitset压一下scc里的点,然后按拓扑倒序向上合并到达状态,然后加ans的时候记得乘size #include<i ...

  6. P4575 [CQOI2013]图的逆变换

    传送门 如果新的图里存在边\((u,v)\),那么说明原图中\(u\)的终点和\(v\)的起点是同一个点 于是可以对新图中的每个点维护它的起点和终点,如果有一条边就把对应两个应该相等的点用并查集连起来 ...

  7. iOS NSDictionary <--> NSString(JSON) in Objc

    NSDictionary --> NSString + (NSString*)stringINJSONFormatForObject:(id)obj { NSData *jsonData = [ ...

  8. nginx_uWSGI_django_virtualenv_supervisor发布web服务器

    nginx_uWSGI_django_virtualenv_supervisor发布web服务器 nginx 导论 123456789101112131415161718192021222324252 ...

  9. Python之Linux下的virtualenv&&virtualenvwrapper

    virtualenv 可以在系统中建立多个不同并且相互不干扰的虚拟环境. #指定清华源下载pip的包 pip3 install -i https://pypi.tuna.tsinghua.edu.cn ...

  10. That Nice Euler Circuit UVALive - 3263 || 欧拉公式

    欧拉定理: 简单多面体的顶点数V.棱数E及面数F间有关系有著名的欧拉公式:V-E+F=2. 设G为任意的连通的平面图,则v-e+f=2,v是G的顶点数,e是G的边数,f是G的面数.(引) 证明(?) ...