<div id="app">
<!-- 2. .stop修饰符的使用 -->
<!-- 会产生冒泡 -->
<div @click="divClick">
<!-- .stop阻止事件的冒泡 -->
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 3. .prevent修饰符的使用:阻止默认提交 -->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3. 监听某个键盘按键的点击 比如监听回车-->
<input type="text" @keyUp.enter="keyUp">
<!-- 4. .once修饰符的使用 比如这个按钮只能点一次-->
<button @click.once='onceClick'>按钮2</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀'
},
methods: {
btnClick() {
console.log("btnClick")
},
divClick() {
console.log("divClick")
},
submitClick() {
console.log("submitClick")
},
keyUp() {
console.log("keyUp")
},
onceClick() {
console.log("once")
}
}
})
</script>
v-on的修饰符
最新推荐文章于 2024-05-21 14:54:17 发布