对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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
简单的三步vuex入门
May 20 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
jquery实现企业定位式导航效果
2018/01/01 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue-router传参用法详解
2019/01/19 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
基于Python函数和变量名解析
2019/07/19 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python urllib和urllib3知识点总结
2021/02/08 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
自我检讨报告
2015/01/28 职场文书
圣诞晚会主持词
2015/07/01 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Golang实现AES对称加密的过程详解
2021/05/20 Golang