Vue 表單
Vue 提供了一種簡單的方法，透過新增響應性和表單驗證等額外功能來改善表單的使用者體驗。
Vue 在處理表單時使用 v-model 指令。
我們的第一個 Vue 表單
讓我們從一個簡單的購物清單示例開始，看看如何在建立表單時使用 Vue。
有關 HTML 表單及其相關標籤和屬性的更多資訊，請參閱我們的 HTML 表單教程。
1. 新增標準 HTML 表單元素
<form>
<p>新增專案</p>
<p>專案名稱: <input type="text" required></p>
<p>數量: <input type="number"></p>
<button type="submit">新增專案</button>
</form>
2. 建立 Vue 例項，其中包含當前專案名稱、數量和購物清單，並使用 v-model 將我們的輸入連線到它。
<div id="app">
<form>
<p>新增專案</p>
<p>專案名稱: <input type="text" required v-model="itemName"></p>
<p>數量: <input type="number" v-model="itemNumber"></p>
<button type="submit">新增專案</button>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: '西紅柿', number: 5 }
]
}
}
})
app.mount('#app')
</script>
3. 呼叫方法將專案新增到購物清單，並阻止在提交時預設瀏覽器重新整理。
<form v-on:submit.prevent="addItem">
4. 建立將專案新增到購物清單並清除表單的方法
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item);
this.itemName = null
this.itemNumber = null
}
}
5. 使用 v-for 在表單下方顯示一個自動更新的購物清單
<p>購物清單:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
下面是我們的第一個 Vue 表單的最終程式碼。
示例
在此示例中，我們可以向購物清單新增新專案。
<div id="app">
<form v-on:submit.prevent="addItem">
<p>新增專案</p>
<p>專案名稱: <input type="text" required v-model="itemName"></p>
<p>數量: <input type="number" v-model="itemNumber"></p>
<button type="submit">新增專案</button>
</form>
<p>購物清單:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: '西紅柿', number: 5 }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
請注意上面示例中 v-model 提供的雙向繫結
v-model在 HTML 輸入更改時更新 Vue 例項資料v-model還在 Vue 例項資料更改時更新 HTML 輸入
要了解更多關於 v-model 並檢視更多表單示例，請點選“下一步”。
