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>