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. 关于bitset

    https://www.zybuluo.com/ysner/note/1327705 原理 \(bitset\)的原理是将一大堆值为\(0/1\)的数压成一个数. 操作 通过\(i>>x\ ...

  2. splay启发式合并

    3545: [ONTAK2010]Peaks Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1889  Solved: 501[Submit][Sta ...

  3. Mysql数据库介绍、安装和配置文件

    Mysql数据库介绍.安装和配置文件 MySQL数据库介绍 mysql是开源关系型数据库,遵循GPL协议. mysql的特点是性能卓越且服务稳定,开源,无版本限制,成本低,单进程多线程,多用户,基于C ...

  4. sql server 日期模糊查询

    转换成varchar类型 ) like '%2010-10-09%' 两个字段拼接成一个字段 SELECT C0252_ID, C0252_name,C0252_Addr, ((select top ...

  5. 【原创】Elasticsearch无宕机迁移节点

    官方API文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/allocation-filtering.html 参考 ...

  6. java翻译lua+c+openssl签名项目

    原来项目中用openresty nginx+lua实现server,lua调用c动态链接库,来使用openss做签名,并生成130字节(128签名+2位自定义字节)长度的文件. nginx: loca ...

  7. 洛谷 P4012 深海机器人问题 【最大费用最大流】

    和火星那个有点像,但是这个价值直接在路径上,不用拆点,对于每条价值为w的边(i,j),连接(i,j,1,w)(i,j,inf,0),表示价值只能取一次,然后连接源点和所有出发点(s,i,k,0),所有 ...

  8. 洛谷P4116 Qtree3(树剖+线段树)

    传送门 LCT秒天秒地 树剖比较裸的题了 用线段树记录一下区间的最左边的黑点的编号(因为同一条链上肯定是最左边的深度最小,到根节点距离最近) 然后记得树剖的时候肯定是越后面的答案越优,因为深度越浅 / ...

  9. centos 6.4 源码安装php5.4 mysql5.5 apahce2

    centos 6.4 源码安装php5.4 mysql5.5 apahce2 博客分类: php   参考:http://blog.csdn.net/simpleiseasy/article/deta ...

  10. libcurl在centos6.4 64位操作系统上不支持https的解决方案

    rpm -e –nodeps 软件名 例如: 使用yum install nginx 安装了nginx, 这是如果直接使用yum remove nginx 的话,会把依赖的一些包也删掉, 所以要使用r ...