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 - 取消默认事件的主要内容,如果未能解决你的问题,请参考以下文章