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>