Vue v-model 指令
与普通 JavaScript 相比，在 Vue 中处理表单更容易，因为 v-model 指令以相同的方式连接所有类型的输入元素。
v-model 在输入元素的 value 属性和 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: '初始文本'
}
}
})
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>
重要商品？
<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 {
重要：false
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
让我们将此动态功能包含到我们的购物清单示例中。
示例
<div id="app">
<form v-on:submit.prevent="addItem">
<p>添加商品</p>
<p>商品名称： <input type="text" required v-model="itemName"></p>
<p>数量： <input type="number" v-model="itemNumber"></p>
<p>
重要？
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">添加商品</button>
</form>
<hr>
<p>购物清单：</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: '西红柿', 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>添加商品</p>
<p>商品名称： <input type="text" required v-model="itemName"></p>
<p>数量： <input type="number" v-model="itemNumber"></p>
<p>
重要？
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">添加商品</button>
</form>
<p><strong>购物清单：</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: '西红柿', 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 使表单本身动态化。
我们需要
- 一个带有相关输入标签和“订购”按钮的表单。
- 单选按钮用于选择“晚餐”、“饮料”或“甜点”。
- 选择类别后，会出现一个下拉菜单，其中包含该类别的所有商品。
- 选择商品后，您会看到商品的图片，您可以选择数量并将其添加到订单中。将商品添加到订单后，表单会重置。
