对vue下点击事件传参和不传参的区别详解

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

对vue下点击事件传参和不传参的区别详解

宇智波幽助   2020-05-16 我要评论

如下所示:

<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下点击事件传参和不传参的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们