v-model

动态复选框

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

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

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

我们需要:

• Vue 实例数据属性中名为"important"(重要)的布尔值
• 用户可以检查该项目是否"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 使表单本身动态化。

我们需要:

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

示例

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

»

---

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>

---