Vue 表单
1. 添加标准 HTML 表单元素:
<form>
<p>Add item</p>
<p>Item name: <input type="text" required></p>
<p>How many: <input type="number"></p>
<button type="submit">Add item</button>
</form>
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. 调用该方法将商品添加到购物清单，并防止提交时默认浏览器刷新。
<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>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 的更多信息并查看更多表单示例，请单击"下一步"。
