对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写的实用看图工具实现代码
Jul 26 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue Object 的变化侦测实现代码
Apr 15 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python动态视频下载器的实现方法
2019/09/16 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python实现扫雷游戏
2020/03/03 Python
如何对python的字典进行排序
2020/06/19 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
园林施工员岗位职责
2013/12/11 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
团代会主持词
2014/04/02 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
承诺书范本
2015/01/21 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers