对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 弹出登录窗口实现代码
Dec 24 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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进行MySQL删除记录操作代码
2008/06/07 PHP
PHP操作xml代码
2010/06/17 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python构建网页爬虫原理分析
2017/12/19 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python实现二维插值的三维显示
2018/12/17 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
国庆节文艺活动方案
2014/02/03 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
标准单位租车协议书
2014/09/23 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2015年植树节活动总结
2015/02/06 职场文书
签字仪式主持词
2015/07/03 职场文书
终止合同协议书范本
2016/03/22 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python