Vue 表单

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

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

首次使用 Vue

让我们从一个简单的购物清单实例开始，了解如何在创建表单时使用 Vue。有关 HTML 中的表单以及相关标记和属性的更多信息，学习本站的 HTML表单 教程。

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>