vue中阻止表單自動提交

有時候我們在用vue項目時，肯定會遇到這樣的問題，業(yè)務中需要用到form，但是點擊提交按鈕會觸發(fā)form的默認提交，如果用在form上綁定return false，需要單獨寫驗證函數(shù)和接收到數(shù)據(jù)后對數(shù)據(jù)的處理函數(shù)，這樣非常不方便，有沒有辦法阻止form自己的默認提交，在點擊提交按鈕或者在輸入框聚焦時點回車，我們根據(jù)自己的需求處理數(shù)據(jù)呢？

很簡單，vue中的@submit.prevent屬性可以幫我們實現(xiàn)這個功能，當我們點擊提交按鈕時，表單并不會提交，而是會觸發(fā)綁定的函數(shù)，就像下邊的onSubmith函數(shù)一樣，我們可以在函數(shù)里做想做的事情，比如參數(shù)完整性驗證，ajax提交，對后臺數(shù)據(jù)的處理等等。

// html代碼

<form? autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">

? ? <input type="text" />

? ? <button type="submit">提交</button>

</form>

// js代碼

methods: {

? onSubmit: function () {

? ? // 阻止默認表單提交

? ? // 做你自己想做的事，比如ajax請求后臺數(shù)據(jù)

? ? return false;

? }

}