对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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
js实现div色块碰撞
Jan 16 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue mounted组件的使用
2018/06/18 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
node 版本切换的实现
2020/02/02 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
python安装Scrapy图文教程
2017/08/14 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
员工试用期自我评价
2014/09/18 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年行政工作总结范文
2015/04/09 职场文书