Vue v-model 指令

与普通 JavaScript 相比，在 Vue 中使用表单更容易，因为 v-model 指令以相同的方式连接所有类型的输入元素。

v-model 在输入元素值属性和 Vue 实例中的数据值之间创建了一个链接。当您更改输入时，数据会更新，当数据更改时，输入也会更新（双向绑定）。

双向绑定

正如我们在上一页的购物列表实例中所看到的，v-model 为我们提供了双向绑定，这意味着表单输入元素会更新 Vue 数据实例，Vue 实例数据的更改会更新输入。

下面的实例还演示了与 v-model 的双向绑定。

实例

双向绑定：尝试在输入字段中写入，以查看 Vue 数据属性值是否得到更新。也可以尝试直接在代码中写入以更改 Vue 数据属性值，运行代码，并查看输入字段是如何更新的。

<div id="app">
  <input type="text" v-model="inpText">
  <p> {{ inpText }} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        inpText: 'Initial text'
      }
    }
  })
  app.mount('#app')
</script>

动态 Checkbox 复选框

我们在上一页的购物清单中添加了一个复选框，用于标记某个商品是否重要。

在复选框旁边，我们添加了一个文本，该文本始终反映当前的 'important' 状态，在 true 或 false 之间动态变化。

我们使用 v-model 来添加这个动态复选框和文本，以改进用户交互。我们需要:

• Vue 实例数据属性中名为 'important' 的布尔值
• 用户可以在其中检查项目是否重要的复选框
• 动态反馈文本，以便用户可以查看项目是否重要

以下是与购物清单隔离的 'important' 功能的外观。

实例

复选框文本是动态的，以便文本反映当前的复选框输入值。

<div id="app">
  <form>
    <p>
      Important item?
      <label>
        <input type="checkbox" v-model="important">
        {{ important }}
      </label>
    </p>
  </form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
       important: false
      }
    }
  })
  app.mount('#app')
</script>

让我们在购物清单实例中包含这个动态特性。

实例

<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>
    <p>
      Important?
      <label>
        <input type="checkbox" v-model="itemImportant">
        {{ important }}
      </label>
    </p>
    <button type="submit">Add item</button>
  </form>
  <hr>
  <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,
        important: false,
        shoppingList: [
          { name: 'Tomatoes', number: 5, important: false }
        ]
      }
    },
    methods: {
      addItem() {
        let item = {
          name: this.itemName,
          number: this.itemNumber
          important: this.itemImportant
        }
        this.shoppingList.push(item)
        this.itemName = null
        this.itemNumber = null
        this.itemImportant = false
      }
    }
  })
  app.mount('#app')
</script>

在购物清单中标记已找到的商品

让我们添加功能，以便添加到购物列表中的项目可以标记为已找到。

我们需要：

• 单击时要作出反应的列表项
• 将已单击项目的状态更改为 'found'，并使用此按钮将项目从视觉上移开，并使用CSS将其删除

我们创建一个包含所有需要查找的项目的列表，并在下面创建一个包含删除的项目的列表。实际上，我们可以将所有项目放在第一个列表中，将所有项目放在第二个列表中，只需使用 v-show 和 Vue 数据属性 'found' 来定义是在第一个列表还是第二个列表中显示项目。

实例

在将物品添加到购物列表后，我们可以假装去购物，在找到物品后单击它们。如果我们错误地单击了某个项目，可以通过再次单击该项目将其带回 'not found' 列表。

<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>
    <p>
      Important?
      <label>
        <input type="checkbox" v-model="itemImportant">
        {{ important }}
      </label>
    </p>
    <button type="submit">Add item</button>
  </form>
  <p><strong>Shopping list:</strong></p>
  <ul id="ulToFind">
    <li v-for="item in shoppingList"
        v-bind:class="{ impClass: item.important }"
        v-on:click="item.found=!item.found"
        v-show="!item.found">
          {{ item.name }}, {{ item.number}}
    </li>
  </ul>
  <ul id="ulFound">
    <li v-for="item in shoppingList"
        v-bind:class="{ impClass: item.important }"
        v-on:click="item.found=!item.found"
        v-show="item.found">
          {{ 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,
        important: false,
        shoppingList: [
          { name: 'Tomatoes', number: 5, important: false, found: false }
        ]
      }
    },
    methods: {
      addItem() {
        let item = {
          name: this.itemName,
          number: this.itemNumber,
          important: this.itemImportant,
          found: false
        }
        this.shoppingList.push(item)
        this.itemName = null
        this.itemNumber = null
        this.itemImportant = false
      }
    }
  })
  app.mount('#app')
</script>

使用 v-model 使窗体本身具有动态性

我们可以制作一个表格，让客户从菜单中订购。为了方便客户，我们只在客户选择订购饮料后才提供饮料供选择。可以说，这比一次向客户展示菜单上的所有项目要好。在本例中，我们使用 v-model 和 v-show 使表单本身具有动态性。

我们需要：

• 一个表单，带有相关的输入标签和“订单”按钮。
• 单选按钮可选择 'Dinner', 'Drink' 或 'Dessert'。
• 选择类别后，将出现一个下拉菜单，其中包含该类别中的所有项目。
• 当选择一个项目时，您会看到它的图片，您可以选择数量并将其添加到订单中。将项目添加到订单时，表单将重置。

实例

这种形式是动态的。它根据用户的选择而变化。用户必须先选择类别，然后选择产品和数量，然后才能看到 order 订购按钮，用户才能订购。