【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属性赋新值的时候,新值 ...
随机推荐
- SQL SERVER创建表
创建表 create table table_name ( column_name_1 data_type, column_name_2 data_type NOT NULL, column_name ...
- dubbo分布式服务框架-study2
本文开始对springboot+dubbo集成,使用的版本为springboot 2.0.0.dubbo 2.0.0,步骤如下: 1.添加依赖: <dependency> <grou ...
- Windows下mysql导出和导入数据库表(命令行)
导出: 1.打开ctrl+R输入cmd 打开命令行 2.cd D:\mysql-8.0.15-winx64\bin 到MySQL的bin目录 3.输入命令 mysqldump -u root -p ...
- 2019南昌网络赛 I. Yukino With Subinterval 树状数组套线段树
I. Yukino With Subinterval 题目链接: Problem Descripe Yukino has an array \(a_1, a_2 \cdots a_n\). As a ...
- Codeforces Round #590 (Div. 3) Editorial
Codeforces Round #590 (Div. 3) Editorial 题目链接 官方题解 不要因为走得太远,就忘记为什么出发! Problem A 题目大意:商店有n件商品,每件商品有不同 ...
- 超简单的js实现提示效果弹出以及延迟隐藏的功能
自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...
- shiro 权限过滤器 -------(1)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBEAAAJRCAIAAACcEbhqAAAgAElEQVR4nO3dv67sVtkHYEefhIKUIC ...
- 客户端相关知识学习(十)之app给h5传递数据
方法一: app可以把参数传到h5的链接里,用类似?xx=xx&xx=xx的形式拼接,js解析参数即可. 方法二: 情况一:app调用h5 原生app都可以对js的function进行触发,前 ...
- js Indexof的用法
JavaScript中indexOf()函数 JavaScript中indexOf()函数方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回 -1.如果 ...
- Java Web-JSP学习
Java Web-JSP学习 概念 Java Server Pages:Java服务器端页面.可以在其中直接定义HTML标签,也可以在其中直接定义java代码. 关于JSP和JAVASCRIPT的区别 ...