知识很久不用的话,果然是容易忘的...

记记笔记,希望能加深点印象吧。

【仅仅传入事件对象】

html:

  1. <div id="app">
  2. <button @click="click">ddddd</button> // 不写任何参数
  3. </div>

js:

  1. new Vue({
  2. el: '#app',
      methods: {
  3.     click: function(event){ // 事件对象会自动传入第一个参数
  4.       console.log(event);
  5.     }
  6.   }
  7. })

【仅仅传入自定义参数】

html:

  1. <div id="app">
  2. <button @click="click(123)">ddddd</button>
  3. </div>

js:

  1. new Vue({
  2. el: '#app',
  3.   methods: {
  4.     click: function(event){ // 123会存入第一个参数event 这时候就没有事件对象了
  5.       console.log(event);
  6.     }
  7.   }
  8. })

【同时传入事件对象和自定义参数】

html:

  1. <div id="app">
  2. <button @click="click($event,123)">ddddd</button> // 第一个参数要用$event表示事件对象 第二个参数传参
  3. </div>

js:

  1. new Vue({
  2. el: '#app',
  3.   methods: {
  4.     click: function(event, value){
  5.       console.log(event);
  6.     }
  7.   }
  8. })

【vue】@click绑定的函数,如何同时传入事件对象和自定义参数的更多相关文章

  1. 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  2. vue构造函数(根实例化时和组件实例对象选项)参数:选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  3. 使用代码给Unity中的动画片段绑定回调函数

    在制作动作游戏的时候,需要播放许多动画,同时还有个需求,那就是动画播放到一定时间时,给一个回调函数,好做对应的状态变更, 我查了一下,发现如果使用的是unity自带的动画系统,要做到这样的话,需要这样 ...

  4. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  5. element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数

    比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...

  6. toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

    toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为 ...

  7. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  8. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  9. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

随机推荐

  1. SQL SERVER创建表

    创建表 create table table_name ( column_name_1 data_type, column_name_2 data_type NOT NULL, column_name ...

  2. dubbo分布式服务框架-study2

    本文开始对springboot+dubbo集成,使用的版本为springboot 2.0.0.dubbo 2.0.0,步骤如下: 1.添加依赖: <dependency> <grou ...

  3. Windows下mysql导出和导入数据库表(命令行)

    导出: 1.打开ctrl+R输入cmd 打开命令行 2.cd D:\mysql-8.0.15-winx64\bin 到MySQL的bin目录 3.输入命令  mysqldump -u root -p ...

  4. 2019南昌网络赛  I. Yukino With Subinterval 树状数组套线段树

    I. Yukino With Subinterval 题目链接: Problem Descripe Yukino has an array \(a_1, a_2 \cdots a_n\). As a ...

  5. Codeforces Round #590 (Div. 3) Editorial

    Codeforces Round #590 (Div. 3) Editorial 题目链接 官方题解 不要因为走得太远,就忘记为什么出发! Problem A 题目大意:商店有n件商品,每件商品有不同 ...

  6. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  7. shiro 权限过滤器 -------(1)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBEAAAJRCAIAAACcEbhqAAAgAElEQVR4nO3dv67sVtkHYEefhIKUIC ...

  8. 客户端相关知识学习(十)之app给h5传递数据

    方法一: app可以把参数传到h5的链接里,用类似?xx=xx&xx=xx的形式拼接,js解析参数即可. 方法二: 情况一:app调用h5 原生app都可以对js的function进行触发,前 ...

  9. js Indexof的用法

    JavaScript中indexOf()函数 JavaScript中indexOf()函数方法返回一个整数值,指出  String 对象内子字符串的开始位置.如果没有找到子字符串,则返回 -1.如果 ...

  10. Java Web-JSP学习

    Java Web-JSP学习 概念 Java Server Pages:Java服务器端页面.可以在其中直接定义HTML标签,也可以在其中直接定义java代码. 关于JSP和JAVASCRIPT的区别 ...