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 添加此动态复选框和文本，以改善用户交互。
我们需要：
- 一个名为“important”的 Vue 实例数据属性中的布尔值
- 一个复选框，用户可以在其中选中商品是否重要
- 一个动态反馈文本，以便用户可以看到商品是否重要
以下是“重要”功能的隔离于购物清单的演示方式。
示例
复选框文本被设置为动态的，以便文本反映当前复选框输入值。
<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 {
important: 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>
自己试试 »
标记购物清单中的找到的商品
让我们添加功能，以便可以将添加到购物清单中的商品标记为已找到。
我们需要：
- 使列表项对点击做出反应
- 将点击的商品的状态更改为“found”，并使用它通过 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 来使表单本身动态。
我们需要：
- 一个带有相关输入标签和“订购”按钮的表单。
- 单选按钮，用于选择“晚餐”、“饮料”或“甜点”。
- 选择类别后，会出现一个下拉菜单，其中包含该类别中的所有商品。
- 选择商品后，您会看到商品的图片，您可以选择数量并将其添加到订单中。商品添加到订单后，表单将重置。
