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 ...
随机推荐
- javascript 省、市、地县三级联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...
- 【转】Google 发布 Android 性能优化典范(比较老,但很实用)
2015年伊始,Google发布了关于Android性能优化典范的专题, 一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有 ...
- python 列表,元祖,字典
一 列表 1 列表的循环遍历 namesList = ['xiaoWang','xiaoZhang','xiaoHua'] for name in namesList: print(name) 结果 ...
- 1.jeesite环境搭建
安装部署 1. 运行Maven目录下的settings.bat文件,用来设置maven仓库路径,并按提示操作(设置PATH系统变量.配置Eclipse). 2. 执行jeesite/bin/eclip ...
- zoj3955:Saddle Point(想法题)
传送门 题意 给出n*m的矩阵,询问所有子矩阵中鞍点的个数 鞍点定义:在行唯一最小,在列唯一最大 分析 我们遍历每个点,计算该点对于答案的贡献即可. 每个点的贡献为\((2^{numa[i][j]}) ...
- HDU1254:推箱子(bfs+dfs)
传送门 题意 给出一副图 0.空地1.墙2.箱子3.目的地4.人所在的位置 问最少几步能将箱子推到目的地 分析 这道题难度略大(菜鸡),首先用vis[bx][by][mx][my]记录当箱子(bx,b ...
- java面试(上)
http://blog.csdn.net/jackfrued/article/details/44921941 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: - 抽象:抽象是 ...
- bzoj 4585: [Apio2016]烟火表演【左偏树】
参考:https://blog.csdn.net/wxh010910/article/details/55806735 以下课件,可并堆部分写的左偏树 #include<iostream> ...
- [App Store Connect帮助]七、在 App Store 上发行(2.2)设定价格与销售范围:将您的 App 以预订形式发布
在首次将您的 App 发布至 App Store 前,您可以选择以预订形式提供该 App.在您的 App 发布以供下载之前,顾客可以查看您的产品页并订购您的 App.您的 App 一旦发布,顾客将会收 ...
- PHP arrray_filter(), array_map()区别与应用
array_filter()用回调函数过滤数组中的元素.依次将数组中的元素传递给回调函数,如果回调函数返回true,则被过滤的元素作为返回数组的元素,并最终一起返回.数组的键名保持不变.array_m ...