对vue下点击事件传参和不传参的区别详解


Posted in Javascript onSeptember 15, 2018

如下所示:

<div id = 'app'>
  <p><button @click = 'test_click1'>{{btn_text1}}</button></p>
  <br>
  <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p>
 </div>

 <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
 <script type="text/javascript">

  var _vm = new Vue({
   data : {
    btn_text1 : '点击1' ,
    btn_text2 : '点击2'
   },
   methods : {
    test_click1 : function (e) {
     console.log('test_click1--------------------------') ;
     console.log(e) ;   
     // 输出结果:MouseEvent {isTrusted: true, screenX: 40, screenY: 121, clientX: 40, clientY: 30, …}

     console.log(e.target) ;  // 输出结果:<button>点击1</button>
     console.log('test_click1--------------------------') ;
    },
    test_click2 : function (e) {
     console.log('test_click2--------------------------') ;
     console.log(e) ;   // 输出结果:123
     console.log(e.target) ;  // 输出结果:undefined
     console.log('test_click2--------------------------') ;
    }
   }
  }).$mount('#app');
 </script>

以上这篇对vue下点击事件传参和不传参的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
基于Vue中的父子传值问题解决
Jul 27 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
You might like
PHP脚本的10个技巧(3)
2006/10/09 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python的面向对象思想分析
2015/01/14 Python
详解Python中的join()函数的用法
2015/04/07 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
班班通校本培训方案
2014/03/12 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2014年工程工作总结
2014/11/25 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
志愿者工作心得体会
2016/01/15 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python