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