【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属性赋新值的时候,新值 ...
随机推荐
- 记录一次线上yarn RM频繁切换的故障
周末一大早被报警惊醒,rm频繁切换 急急忙忙排查 看到两处错误日志 错误信息1 ervation <memory:0, vCores:0> 2019-12-21 11:51:57,781 ...
- 在Eclipse中手动为其添加spring组件开发支持
https://blog.csdn.net/Tajyl/article/details/79410897 注意找对应spring版本 进入eclipse >>help>>abo ...
- 用shell脚本安装MySQL-5.7.22-Percona版本
#!/bin/bash MySQL_Package=Percona-Server-5.7.22-22-Linux.x86_64.ssl101.tar.gz Package_Source=Percona ...
- Error starting daemon: error initializing graphdriver: devmapper: Device docker-thinpool is not a thin pool
Error starting daemon: error initializing graphdriver: devmapper: Device docker-thinpool is not a th ...
- 数据库优化SQL
sql优化规则: 1.对于查询,尽量不要使用全表扫描,尽量在where子句以及order by所对应的字段建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放 ...
- Spring Boot Redis 集成 Error creating bean with name 'enableRedisKeyspaceNotificationsInitializer'
一.原因:redis集群环境没有开启Keyspace notifications 二.解决办法 @Configuration public class HttpSessionConfig { /** ...
- LeetCode 腾讯精选50题--只出现一次数字
事先说明,如果不是评论区的大牛一语点破,我可能还会陷在死胡同里出不来,这道题其实很简单,利用了任何一个学过二进制的人都了解的定理,即: 1. 异或操作满足交换律 : a ^ b ^ c 等价于 a ^ ...
- angular-file-upload.min.js.map文件下载
https://github.com/nervgh/angular-file-upload 下载地址 在文件 菜单栏有对应文件
- 如何在Marketing Cloud里创建extension field扩展字段
首先在Marketing Cloud里找到创建扩展字段的tile入口,搜索关键字extension: 这会进入Fiori应用"Custom fields",能看到系统里所有创建好的 ...
- 【2】Kafka概念及原理
1.Kafka背景 1.1.Kafka概要 Apache Kafka是一个开源的.轻量级的.分布式的.可分区的.可复制备份的.基于zookeeper协调管理的分布式流式消息系统.由Scala写成,支 ...