【vue】@click绑定的函数,如何同时传入事件对象和自定义参数
知识很久不用的话,果然是容易忘的...
记记笔记,希望能加深点印象吧。
【仅仅传入事件对象】
html:
<div id="app">
<button @click="click">ddddd</button> // 不写任何参数
</div>
js:
new Vue({
el: '#app',
methods: {
click: function(event){ // 事件对象会自动传入第一个参数
console.log(event);
}
}
})
【仅仅传入自定义参数】
html:
<div id="app">
<button @click="click(123)">ddddd</button>
</div>
js:
new Vue({
el: '#app',
methods: {
click: function(event){ // 123会存入第一个参数event 这时候就没有事件对象了
console.log(event);
}
}
})
【同时传入事件对象和自定义参数】
html:
<div id="app">
<button @click="click($event,123)">ddddd</button> // 第一个参数要用$event表示事件对象 第二个参数传参
</div>
js:
new Vue({
el: '#app',
methods: {
click: function(event, value){
console.log(event);
}
}
})
【vue】@click绑定的函数,如何同时传入事件对象和自定义参数的更多相关文章
- 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
- vue构造函数(根实例化时和组件实例对象选项)参数:选项详解
实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...
- 使用代码给Unity中的动画片段绑定回调函数
在制作动作游戏的时候,需要播放许多动画,同时还有个需求,那就是动画播放到一定时间时,给一个回调函数,好做对应的状态变更, 我查了一下,发现如果使用的是unity自带的动画系统,要做到这样的话,需要这样 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数
比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...
- toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为 ...
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
随机推荐
- Netty的学习
看了几天高并发和NIO 今晚终于要开始学习Netty http://ifeve.com/netty5-user-guide/ Netty实现通信的步骤 1.创建两个NIO线程组,一个专门用于网络事件的 ...
- PostgreSQL练习3
select dname,count(ename),avg(sal),sum(sal) from emp e,dept d where e.deptno=d.deptno group by dname ...
- Ubuntu使用Shadow socks-qt5
由于大多数朋友都问我在Ubuntu上面怎么kexueshangwang,为了防止以后忘记,故此记录. 本教程使用的配置 Ubuntu 16.10Shadowsocks-qt5一个可用的ss账号一根能够 ...
- -bash: /usr/librxec/grepconf.sh:Nosuch file or directory
最近修改/etc/profile文件时,不小心在后面添加了source /etc/profile,导致使用xshell登录远程linux的时候出现下面的信息, 一直无法进入linux,将profile ...
- c#连接数据库SqlHelper报错
这是一个困扰了我好几天的问题,首先看一下报错信息 代码: private static string connectionString = ConfigurationManager.Connectio ...
- django+mysql(1)
报错误:mysqlclient 1.3.13 or newer is required; you have 0.9.3 第一种: django降到2.1.4版本就OK了 第二种(仍使用django 2 ...
- [NOIP10.5模拟赛]3.c题解--思维
题目链接 这次不咕了 https://www.luogu.org/problemnew/show/AT2389 闲扯 考场20分爆搜走人 \cy 话说这几天T3都很考验思维啊 分析 我们先钦定一只鸡( ...
- 前端通过url下载文件方法
前端通过url下载文件方法 产生背景 浏览器通过url下载文件,当浏览器识别出资深能播放的资源文件,就不会走下载流程,会直接打开 解决方法 1.让后台转成请求的方式,输出文件流(如果想实现批量下载-因 ...
- qt打包发布
需要用到qt自带工具windeployqt.exe 安装 以qt 5.8.0为例 安装qt-opensource-windows-x86-mingw530-5.8.0.exe即可 构建Release版 ...
- linux 中free命令
1.free 命令的选项使用 free 命令查看服务器内存使用情况.free [-b|-k|-m|-g|-h] [-l] [-o] [-t] [-s delay] [-c count] [-V](1) ...