2024年06月21日 建站教程
v-on指令实际上是一种事件绑定的简写方式，可以监控DOM事件，比如点击、鼠标悬停、键盘按压等等。下面web建站小编给大家简单介绍一下！
VUE监听事件用法
<template>
<button v-on:click="handleClick">点击事件</button>
</template>
<script>
export default {
methods: {
handleClick: function (event) {
// 处理点击事件
}
}
}
</script>
VUE阻止事件冒泡
<template>
<div v-on:click="outer">
<div v-on:click="inner">
Click me
</div>
</div>
</template>
<script>
export default {
methods: {
inner: function (event) {
event.stopPropagation()
},
outer: function () {
console.log('outer')
}
}
}
</script>
VUE阻止默认行为
<template>
<form v-on:submit.prevent="submit">
...
</form>
<a href="https://www.google.com" v-on:click.prevent>Google</a>
</template>
<script>
export default {
methods: {
submit: function () {
// 阻止表单的提交行为
}
}
}
</script>
VUE按键修饰符
<template>
<input v-on:keyup.enter="submit">
</template>
<script>
export default {
methods: {
submit: function () {
// 处理键盘的回车事件
}
}
}
</script>
本文链接：http://so.lmcjl.com/news/7005/