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 的更多信息并查看更多表单示例，请单击“下一页”。
