对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 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
express中static中间件的具体使用方法
Oct 17 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
JavaScript实现登录窗体
Jun 22 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Python 文件操作的详解及实例
2017/09/18 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Numpy之文件存取的示例代码
2018/08/03 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
协议书模板
2014/04/23 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
环保宣传标语
2014/06/12 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
学生会自荐信
2019/05/16 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA