# 14.使用 v 模型进行双向数据绑定 > 原文： [https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/) 终于，有一天，要了解难题的缺失部分，即[数据绑定](https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/)。到目前为止，我们已经了解了如何使用插值，如何将`v-bind`用于属性绑定以及如何将`v-on`用于侦听事件。缺少的部分是`v-model`，它用于双向数据绑定，而这正是我们今天要重点关注的内容！ ## 大字警报！ *双向数据绑定*：这只是模型（Vue 实例中的`data`对象）和视图之间的关系。对视图所做的任何更改（例如，由用户执行）将立即反映在基础 Vue 模型中，并将在视图中呈现此数据的所有位置进行更新。换一种说法， 1. 使用对 data 属性（模型）所做的更改来更新视图 2. 并且，只要在视图中进行更改，数据属性（模型）就会更新你的头在旋转吗？别担心！我们将通过一个例子来理解这个概念。 ## v-model 指令通常使用表单输入和控件创建这种双向绑定。而`v-model`是用于实现该目标的指令！具体来说，以下是`v-model`所使用的确切 HTML 元素， * `` * `

`
*   `<select>`
*   组件（*我们将在“高级 VueJS”部分介绍此主题*）

## 演练示例

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

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

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

```java
<input type="text" v-model="data_property_to_bind"></input>
```

**`Index.html`**

```java
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
      <div>
        
        Greeting Message:
        <input type="text" v-model="message"></input> 
        <p>The message is: {{ message }}</p>
      </div>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>
```

**`Index.js`**

```java
new Vue({
  el: "#app",
  data: {
    message: "hi"
  }
});
```

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

初始输出如下。

![v-model initial output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20467%20384'%3E%3C/svg%3E)