Vue 点击事件怎么传递 this ?
Part.1 问题

如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢?
Part.2 思路
为当前点击的按钮添加一个 单独的类名,我的做法:
.active {
background: #3C8DBC;
color: white
}
为当前点击的按钮添加一个 .active 类,但是在每次为当前点击的按钮添加类名时,其它的按钮需要删除 .active 类名才行
Part.3 解决
每次点击时先 remove 掉按钮的 .active 类, 然后单独给当前点击按钮添加 .active。 如何在点击时,获取当前元素信息? vue 关键字 $event


Vue 点击事件怎么传递 this ?的更多相关文章
- vue 点击事件阻止冒泡 用stop
1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'
- Vue点击事件失效
在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发.原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上cl ...
- vue 点击事件唤醒QQ
window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=QQ号' window.location.href = 'http://wpa. ...
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...
- 四种方式写按钮点击事件和Android 中常用的布局
1.匿名内部类的方式 2.创建一个类实现onClickListener,实现onClick方法,设置控件点击时传一个类的对象 3.让当前类实现onClickListener,设置控件点击事件时传递一个 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- 记录Vue和Jquery混合开发中关于点击事件的一个bug
最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...
随机推荐
- Ubuntu+anaconda环境里安装opencv
在Ubuntu的Anaconda环境下安装OpenCV比较方便,直接在终端中输入以下命令: conda install --channel https://conda.anaconda.org/men ...
- I.MX6 Battery issues
/******************************************************************** * I.MX6 Battery issues * 说明: * ...
- 并不对劲的bzoj2038:p1494:[国家集训队]小Z的袜子
题目大意 有\(n\)(\(n\leq5*10^4\))个数\(a_1,a_2,...,a_n\)(\(\forall i\in[1,n], 1\leq a_i\leq n\)) \(m\)(\(m\ ...
- Java-Maven:Maven百科
ylbtech-Java-Maven:Maven百科 1.返回顶部 1. Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven 除了以程序 ...
- Java Socket线程的设计原理介绍
转自:http://developer.51cto.com/art/201003/190001.htm Java Socket线程我们经常会用到的技术,但是有很多程序员还是有不少的使用问题,下面我们就 ...
- git合并相关问题(copy)
[说明:资料来自http://gitbook.liuhui998.com/3_3.html] 一个Git仓库可以维护很多开发分支.现在我们来创建一个新的叫”experimental”的分支: $ gi ...
- Java多线程系列八——volatile和ThreadLocal
参考资料: http://ifeve.com/java-memory-model-4/ http://www.infoq.com/cn/articles/java-memory-model-1 htt ...
- P4575 [CQOI2013]图的逆变换
传送门 如果新的图里存在边\((u,v)\),那么说明原图中\(u\)的终点和\(v\)的起点是同一个点 于是可以对新图中的每个点维护它的起点和终点,如果有一条边就把对应两个应该相等的点用并查集连起来 ...
- html语义化与前端页面排版规则
1.使用div进行布局,不要用div进行无意义的包裹 span行内常见元素 2.可以使用div和p的情况下,尽量用p.p有默认上下间隔字体加粗等,可以对终端有适配 3.需要强调的文本,可以包含在st ...
- centos安装PHP扩展(bcmath)
Centos下搭完Mysql+Apache+PHP后,发现有些网页打开是空白的.将php.ini里面的参数 error_reporting = E_ALL,display_errors = On,di ...