Vue 表单

Vue 为我们提供了一种简单的方法，通过添加响应性和表单验证等额外功能来改善表单的用户体验。

Vue 使用v-model处理表单时的指令。

我们使用 Vue 构建的第一个表单

让我们从一个简单的购物清单示例开始，看看如何在创建表单时使用 Vue。

有关 HTML 表单以及相关标签和属性的更多信息，请参阅我们的 HTML 表单教程。

1. 添加标准 HTML 表单元素：

2. 使用当前商品名称、编号和购物清单创建 Vue 实例，并使用v-model将我们的输入连接到它。

<div id="app">
<form>
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</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: 'Tomatoes', number: 5 }
]
}
}
})
app.mount('#app')
</script>

3. 调用该方法将商品添加到购物清单，并防止提交时默认浏览器刷新。

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>Shopping list:</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>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</button>
</form>

<p>Shopping list:</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: 'Tomatoes', 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并查看更多表单示例，请单击“下一步”。