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. 【T^T 1736】【FJUTOJ 1077】排座位

    http://59.77.139.92/problem.php?id=1077 水题,小心PE // <1736.cpp> - 11/12/16 17:17:52 // This file ...

  2. hdu 2553(N皇后问题)

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. 小程序-demo:小程序示例-page/component2

    ylbtech-小程序-demo:小程序示例-page/component2 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...

  4. Java Socket实战之四:传输压缩对象

    转自:http://developer.51cto.com/art/201202/317546.htm 上一篇文章说到了用Java Socket来传输对象,但是在有些情况下比如网络环境不好或者对象比较 ...

  5. winform 窗体设置成无边框、可拖拽、四周圆角

    最近做一个及时通讯系统的登录界面,现在将界面用到的无边框.可拖拽.四周圆角的方法分享如下: 1.无边框的窗体: 把FormBorderStyle的属性设置为none 2.可拖拽:private Poi ...

  6. 简单粗暴解决google被和谐导致google fonts无法加载的问题

    原文:http://www.v2ex.com/t/118403 解决方法:fonts.googleapis.com替换为fonts.useso.com, fonts.useso.com是360安全卫士 ...

  7. Gym 100512B Betting Fast (题意+概率)

    题意:你开始有 s 元钱,然后你要在 t 场内赚到 n 元,每次赢的概率是 p,并且要越快越好. 析:当时没注意这个条件,要越快越好,然后写概率dp,怎么看也不像是对.其实是每次赌 min(s, n- ...

  8. 【黑金教程笔记之008】【建模篇】【Lab 07 数码管电路驱动】—笔记

    实验七的目的是设计实现最大为99数字在2个数码管上.采用同步动态扫描.即行信号和列信号同步扫描.这里数码管是共阳极的.选择端口也是共阳极的. 模块: /************************ ...

  9. ppt自动制作器

    讲一篇论文导入进入,自动生成该论文的展示ppt,啧啧啧,想想岂不是很美妙

  10. [Usaco2005 Jan]Muddy Fields泥泞的牧场

    Description 雨连续不断的击打了放牛的牧场,一个R行C列的格子(1<=R<=50,1<=C<=50).虽然这对草来说是件好事,但这却使得一些没有草遮盖的土地变得很泥泞 ...