【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属性赋新值的时候,新值 ...
随机推荐
- 将neo4j的一个节点上的关系移动到另一个节点上
将neo4j中一个节点的全部关系移动到另一个节点上面,采用先建立新关系,之后删除原先的关系的方式 def move_relations(source_node_id,target_node_id,gr ...
- HADR和TSA需要注意的问题
1.必须将主备数据库都执行一次完全备份,然后使用主库执行online备份后同步至备库: 2.同一台服务器只能添加一个TSA集群管理器,此服务器中无论有几个实例和几个数据库,都会被添加至首次创建的集群中 ...
- LC 202. Happy Number
问题描述 Write an algorithm to determine if a number is "happy". A happy number is a number de ...
- Selenium工具爬取商品
selenium是一个优秀的自动化测试工具,支持多种语言,具体介绍参考官方文档:https://www.seleniumhq.org/docs/. 下面我们使用selenium工具模拟用户点击商品详情 ...
- Foo Fighters CodeForces - 1148F
大意: 给定$n$个二元组$(val_i,mask_i)$. 保证$\sum val_i$不为$0$. 要求选择一个数$s$, 对于每个二元组$(val_i,mask_i)$, 若$s\& m ...
- 使用Enablebuffering多次读取Asp Net Core 3.0 请求体 读取Request.Body流
原文:使用Enablebuffering多次读取Asp Net Core 请求体 使用Enablebuffering多次读取Asp Net Core 请求体 1 .Net Core 2.X时代 使用E ...
- .NET Core 创建Windows服务
.NET Core 创建Windows服务 作者:高堂 原文地址:https://www.cnblogs.com/gaotang/p/10850564.html 写在前面 使用 TopShelf+Au ...
- 维护solr索引库
一 2)solrcore 一个solr下可以有多个solrcore,每个solrcore就是一个独立的索引库3)solrconfig.xml lib:配置solr的扩展包的位置,不指定路径 ...
- 微信小程序的wxs语法与vue计算属性
微信小程序的wxs语法 可以当做vue的计算属性和vue filter 使用.因为wxs中的函数可以写在{{ }}中 . 例如: 可用在 <view>{{ foo() }}</v ...
- 项目构建工具之gradle
groovy的高级特性: 可选的类型定义 def.assert.括号是可选的.字符串 .集合API.闭包: 构建脚本 项目project : group name version apply depe ...