关于vue的事件

明阳mark

于 2019-05-29 20:14:00 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_36939013/article/details/90677654

vue 专栏收录该内容

32 篇文章

订阅专栏

博客介绍了前端开发中绑定监听和按键修饰符的相关内容。绑定监听使用 @click 很简单，不传参数时 js 会默认传 $event，传参时需手动传 $event；按键修饰符可实现点击 enter 触发事件的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定监听

使用很简单： @click就可以了
注意，如果不写参数，那么js会默认传一个参数$event，例如

<button @click="test3">test3</button>

 test3(event){
 	 alert(event.target.innerHTML); //这样就可以获取到这个标签的内容了
 }

还有一种情况，就是我们有传参数的情况，要获取到$event需要我们手动传

<button @click="test4(111,$event)">test4</button>

 test4(number, event){
 	alert(number + "--------" + event.target.innerHTML)
 }

按键修饰符

需求：点击enter触发事件

 <input type="text" @keyup="test8">

 <input type="text" @keyup.13="test9">

 <input type="text" @keyup.enter="test10"> <!-- 只有少部分按键才能这样写-->

test8(event) {
    alert(event.target.value + ' ' + event.keyCode)
	if (event.keyCode === 13) {
	   alert("你按下了enter键")
	}
},

test9() {
	alert("你按下了enter键")
},

test10(){
	alert("你按下了enter键")
}