对vue下点击事件传参和不传参的区别详解
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇对vue下点击事件传参和不传参的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
如下所示：
<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下点击事件传参和不传参的区别详解就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。