码农教程 - 一技在手,衣食无忧! tools

Vuev-model指令

❮ 上一节 下一节 ❯

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

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

双向绑定

正如我们在上一页的购物清单示例中已经看到的，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>
亲自试一试 »

笔记：这个v-model双向绑定功能实际上可以通过组合来实现v-bind:value和v-on:input:

  • v-bind:value从 Vue 实例数据更新输入元素，
  • 和v-on:input从输入更新 Vue 实例数据。

但v-model更容易使用，所以这就是我们要做的。

动态复选框

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

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

我们用v-model添加此动态复选框和文本以改善用户交互。

我们需要：

  • Vue 实例数据属性中名为“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>
亲自试一试 »

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

让我们添加功能，以便将添加到购物清单中的商品标记为已找到。

我们需要：

  • 点击时反应的列表项
  • 将单击的项目的状态更改为“已找到”，并使用它以可视方式将项目移开并使用 CSS 将其删除

我们创建一个列表，其中包含我们需要查找的所有项目，下面创建一个列表，其中找到的项目已被删除。我们实际上可以将所有项目放入第一个列表中，并将所有项目放入第二个列表中，然后使用v-show使用 Vue 数据属性 '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使表单本身动态化。

我们需要：

  • 带有相关输入标签和“订单”按钮的表单。
  • 用于选择“晚餐”、“饮料”或“甜点”的单选按钮。
  • 选择类别后，将出现一个下拉菜单，其中包含该类别中的所有项目。
  • 选择商品后，您会看到该商品的图片，您可以选择数量并将其添加到订单中。当商品添加到订单中时，表单会重置。

示例

这种形式是动态的。它根据用户的选择而变化。用户必须首先选择类别，然后选择产品和数量，然后订单按钮变得可见并且用户可以订购。

亲自试一试 »

Vue练习

通过练习测试一下

练习:

提供正确的代码，以便防止提交时默认浏览器刷新。

另外，提供代码，以便输入字段值获得与 Vue 数据实例属性“itemName”和“itemNumber”的双向绑定。

<form v-on:="addItem">
  <p>Add item</p>
  <p>
    Item name: 
    <input type="text" required ="itemName">
  </p>
  <p>
    How many: 
    <input type="number" ="itemNumber">
  </p>
  <button type="submit">Add item</button>
</form>

开始练习


❮ 上一节 下一节 ❯