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

---