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. bzoj 2962 序列操作 —— 线段树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2962 维护 sum[i] 表示选 i 个的乘积和,合并两个子树就枚举两边选多少,乘起来即可: ...

  2. artemplate include

    include用于嵌入字模板 {{include 'template_name'}} 子模板 默认共享当前的数据 也可以自己指定数据 {{include 'template_name' templat ...

  3. ACGAN 论文笔记

    <Conditional Image Synthesis With Auxiliary Classifier GANs> Odena A, Olah C, Shlens J. Condit ...

  4. Codeforces Round #209 (Div. 2) C - Prime Number

    传送门 题意 给出n个数及x,求 \[\frac{\sum _{i=1}^n x^{a_1+a_2+...+a_{i-1}+a_{i+1}+...a_n}}{\prod_{i=1}^n x^{a_i} ...

  5. P3158 [CQOI2011]放棋子

    传送门 题解(因为公式太多懒得自己抄写一遍了--) //minamoto #include<bits/stdc++.h> #define ll long long #define R re ...

  6. ionic2 angular2 模板指令补充

    向div中插入带有html标签的数据   [innerHTML]="item.content"    字符串截取指令                       {{item.de ...

  7. 使用了eclipse10年之后,我终于投向了IDEA

    使用了eclipse10年之后,我终于投向了IDEA 最近,改用了idea,同事都说我投敌了.当然,这些同事都是和我一样的"老"程序员.不说毕业生,公司里的90后基本电脑都不会安装 ...

  8. Tree CodeForces -932D

    错误记录:如下注释语句 #include<cstdio> #include<algorithm> using namespace std; typedef long long ...

  9. 配置Ubuntu16.04第01步:U盘安装 Ubuntu 16.04系统

    Ubuntu 每年发布两个版本,Ubuntu 16.04 开发代号为“Xenial Xerus”,为第六个长期支持(LTS)版本. 1. 制作U盘系统安装盘 1.1下载最新的Universal USB ...

  10. 关于JTable的使用

    JTable是个JavaSwing中的表格控件,可以用来显示数据和编辑数据.这里讲一下我的使用心得. JavaSwing讲究MVC理念,而这个JTable也可以说是个迷你的MVC模型.JTable只是 ...