前端必知必会-Vue v-model 指令

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>

注意：v-model 双向绑定功能实际上可以通过结合使用 v-bind:value 和 v-on:input 来实现：

v-bind:value 用于从 Vue 实例数据更新输入元素，
以及 v-on:input 用于从输入更新 Vue 实例数据。
但 v-model 更易于使用，所以我们将这样做。

动态复选框

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

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

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

我们需要：

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: '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>添加项目</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: '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 v-model 指令的使用，如有问题欢迎私信和评论