【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属性赋新值的时候,新值 ...
随机推荐
- 对称加密、非对称加密、数字签名、数字证书、SSL是什么
非对称密钥加解密 对于一份数据,通过一种算法,基于传入的密钥(一串由数字或字符组成的字符串,也称key),将明文数据转换成了不可阅读的密文,这就是“加密”,同样的,密文到达目的地后,需要再以相应的算法 ...
- Linux系列(15)之进程管理
详细情况查看:https://www.cnblogs.com/dengyungao/p/8523628.html 1.查看进程 有两个命令可以查看进程,分别是ps与top(推荐使用),那他们有什么区别 ...
- log4j application.properties 配置文件
log4j.rootLogger = info,stdout log4j.appender.stdout = org.apache.log4j.ConsoleAppenderlog4j.appende ...
- .Net C# RSA签名和验签重写
namespace com._80community.unittest.CUP { /// <summary> /// CUP Client /// </summary> pu ...
- python经典小程序集锦(一) 实现九九乘法表
本篇文章主要是收集整理一些小程序以供大家娱乐,或者是在面试的时候使用到.文章会持续更新,希望大家收藏关注哦. 1.代码实现过程 for i in range(1, 10): for j in rang ...
- select into from与insert into select区别
创建一个table2 向table2中插入 table1中name为11的所有行(前提table2不存在) select * into table2 from table1 where name=‘ ...
- react开发vscode插件推荐
原文地址:https://github.com/xieqingtian/blog/issues/2 由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记 ...
- 9. Java分支语句之if...else
if...else条件语句 一个if语句包含一个布尔表达式和一条或者多条语句. 语法运用有三种 //第一种 if(布尔表达式){ //如果布尔表达式为true将执行的语句 } //第二种 if(布尔表 ...
- JS原生实现照片抽奖
HTML表格标记实现九宫格,放入九张图片.利用CSS的滤镜属性控制图片的透明度.Javascript实现抽奖和中奖. 可以做为教师上课,随机抽取回答问题的同学,使学生感受到随机的公平性,简单有趣! 点 ...
- 忘记root密码,修改方法
Linux的root密码修改不像Windows的密码修改找回,Windows的登录密码忘记需要介入工具进行解决.CentOS6和CentOS7的密码方法也是不一样的,具体如下: 首先是CentOS 6 ...