VUE - 取消默认事件
Posted 500m
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE - 取消默认事件相关的知识，希望对你有一定的参考价值。
1，在 methods 中
<template>
<div>
<form @submit="addTodo">
<input v-model="title" type="text" name="title">
<input type="submit" value="添加" class="btn">
</form>
</div>
</template>
<script>
export default {
name:‘AddTodos‘,
data() {
return {
title:‘‘,
}
},
methods: {
addTodo(e){
e.preventDefault();//取消默认事件
// this.name 来获取form提交的name字段的数据
console.log(this.title);
}
},
}
</script>
2，@submit.prevent
<template>
<div>
<form @submit.prevent="addTodo">
<input v-model="title" type="text" name="title" placeholder="请添加代办事项...">
<input type="submit" value="添加" class="btn">
</form>
</div>
</template>
<script>
export default {
name:‘AddTodos‘,
data() {
return {
title:‘‘,
}
},
methods: {
addTodo(e){
console.log(this.title);
}
},
}
</script>
以上是关于VUE - 取消默认事件的主要内容，如果未能解决你的问题，请参考以下文章
事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本