测试在vue下点击事件传参和不传参的区别

来源:互联网 发布:报考东华大学网络教育 编辑:程序博客网 时间:2024/06/05 17:21
    <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>