-
.once- 只触发一次回调 -
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调 -
.prevent- 调用event.preventDefault() -
.stop- 调用event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on修饰符</title>
</head>
<body>
<div id="app">
<!-- .stop用于停止冒泡事件，点击按钮不会调用divClick-->
<div @click="divClick">
111111111
<button @click.stop="btnClick">按钮</button>
</div>
<!-- .prevent用于阻止默认事件的执行-->
<form action="new">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- .{keyCode | keyAlias}用于监听键盘的按键，keyCode表示键盘对应的编码，keyAlias代表键盘的名称-->
<input type="text" @keyup.enter="keyUp">
<!-- .once只触发一次回调，点击一次之后，不会再调用点击事件-->
<button @click.once="btnClick">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("按钮被点击了")
},
divClick() {
console.log("div被点击了")
},
submitClick() {
console.log("手动进行提交")
},
keyUp() {
console.log("用户按下了键盘")
}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
