14 使用v-model进行双向数据绑定

原文: https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/

终于,有一天,要了解难题的缺失部分,即数据绑定。 到目前为止,我们已经了解了如何使用插值,如何将v-bind用于属性绑定以及如何将v-on用于监听事件。 缺少的部分是v-model,它用于双向数据绑定,而这正是我们今天要重点关注的内容!

大字警报!

双向数据绑定:这只是模型(Vue 实例中的data对象)和视图之间的关系。 对视图所做的任何更改(例如,由用户执行)将立即反映在基础 Vue 模型中,并将在视图中呈现此数据的所有位置进行更新。 换一种说法,

  1. 使用对data属性(模型)所做的更改来更新视图
  2. 并且,只要在视图中进行更改,数据属性(模型)就会更新

你的头在旋转吗? 别担心! 我们将通过一个示例来理解这个概念。

v-model指令

通常使用表单输入和控件创建这种双向绑定。 而v-model是用于实现该目标的指令! 具体来说,以下是v-model所使用的确切 HTML 元素,

  • <input>
  • <textarea>
  • <select>
  • 组件(我们将在“高级 VueJS”部分介绍此主题

实践示例

让我们以<input>元素为例,在网页上显示一个文本字段。 让我们在 Vue 实例的data对象中也具有“message”属性,该属性用作我们的 Vue 模型,并具有<p>标签以使用胡须语法(文本插值)呈现值。 现在,我们要

  1. message属性的值填充文本字段,例如“hi”,即使用模型更新视图。
  2. 每当用户在文本字段中更改值“hi”时,都必须在数据属性message中进行更新,在我们的示例中,即使用视图和视图的更改来更新模型
  3. 同时将其呈现在<p>标签中

通过将v-model指令添加到<input>标记并将“message”属性绑定到它,可以完成所有这三个步骤,

  1. <inputtype="text"v-model="data_property_to_bind"></input>

Index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello Vue!</title>
  5. <!-- including Vue with development version CDN -->
  6. <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <divid="app">
  10. <h2>Welcome</h2>
  11. <div>
  12. <!-- two-way binding with v-model -->
  13. Greeting Message:
  14. <inputtype="text"v-model="message"></input>
  15. <p>The message is: {{ message }}</p>
  16. </div>
  17. </div>
  18. <!-- including index.js file -->
  19. <scriptsrc="index.js"></script>
  20. </body>
  21. </html>

Index.js

  1. newVue({
  2. el:"#app",
  3. data:{
  4. message:"hi"
  5. }
  6. });

因此,v-model指令告诉 vue.js 为输入字段和引号内提到的message数据属性设置双向绑定。 当然,所有这些都会以反应发生!

初始输出如下。

v-model initial output

图像的右半部分显示 Vue DevTools 窗格。 也可以看到具有message属性及其值的data对象。

当我们将文本字段中的消息从“hi”更改为“hello”时,我们键入的每个字符都将在基础数据模型(如 Vue Devtools 中所示)上进行反应式更新,并在输出结果的视图中进行更新,在<p>标签中使用小胡子语法。

reactivity with v-model

我强烈建议您如图所示打开 Vue Devtools 并更改文本字段中的值,以查看此更改是被动发生的。 这将是您的盛宴! 我可以保证。

修饰符

v-model带有三个修饰符。 如果您错过了修饰符部分,请查看他

用法:遵循v-model指令,添加一个点并指定修饰符。

  • .lazy – 在更改事件(而非输入事件)之后将输入与数据同步
  1. <inputv-model.lazy="message">
  • .number – 用于将有效的输入字符串转换为数字
  1. <inputv-model.number="age">
  • .trim – 自动修剪用户输入
  1. <inputv-model.trim="message">

该代码一如既往在 GitHub 仓库中可用。

试一试,并注意 Vue 如何根据输入类型是否为文本字段,复选框,单选按钮,选择,多选,文本区域元素等来正确更新元素……它看起来和听起来很神奇,因为你需要用于完成这项艰巨的的所有语法,都是一个简单的指令v-model。 如果遇到任何问题,请随时在评论部分留言。

祝您有美好的一天!