Skip to content

J
jbt-zh

OpenDocCN / jbt-zh
9 个月 前同步成功

通知 0
Star 8
Fork 1
J
jbt-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
158.md 6.8 KB
Newer Older
W
2020-06-13 19:17:44  
wizardforcel 已提交
1 
# 14.使用 v 模型进行双向数据绑定
W
init  
wizardforcel 已提交
2 3 4 5 6 7 8 

> 原文： [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`，它用于双向数据绑定，而这正是我们今天要重点关注的内容！

## 大字警报！
W
2020-06-23 18:01:50  
wizardforcel 已提交
9 
*双向数据绑定*：这只是模型（Vue 实例中的`data`对象）和视图之间的关系。 对视图所做的任何更改（例如，由用户执行）将立即反映在基础 Vue 模型中，并将在视图中呈现此数据的所有位置进行更新。 换一种说法，
W
init  
wizardforcel 已提交
10
W
2020-06-13 19:17:44  
wizardforcel 已提交
11 
1.  使用对 data 属性（模型）所做的更改来更新视图
W
init  
wizardforcel 已提交
12 13 14 15 
2.  并且，只要在视图中进行更改，数据属性（模型）就会更新

你的头在旋转吗？ 别担心！ 我们将通过一个例子来理解这个概念。
W
2020-06-13 19:17:44  
wizardforcel 已提交
16 
## v-model 指令
W
init  
wizardforcel 已提交
17
W
2020-06-13 19:17:44  
wizardforcel 已提交
18 
通常使用表单输入和控件创建这种双向绑定。 而`v-model`是用于实现该目标的指令！ 具体来说，以下是`v-model`所使用的确切 HTML 元素，
W
init  
wizardforcel 已提交
19 20 21 22 

*   `<input>`
*   `<textarea>`
*   `<select>`
W
2020-06-23 18:01:50  
wizardforcel 已提交
23 
*   组件（*我们将在“高级 VueJS”部分介绍此主题*）
W
init  
wizardforcel 已提交
24 25 26 

## 演练示例
W
2020-06-24 11:35:11  
wizardforcel 已提交
27 
让我们以`<input>`元素为例，在网页上显示一个文本字段。 让我们在 Vue 实例的`data`对象中也具有“message”属性，该属性用作我们的 Vue 模型，并具有`<p>`标签以使用胡须语法（文本插值）呈现值。 现在，我们要
W
init  
wizardforcel 已提交
28
W
2020-06-24 11:35:11  
wizardforcel 已提交
29 30 
1.  用`message`属性的值填充文本字段，例如“hi”，即使用模型更新视图。
2.  每当用户在文本字段中更改值“hi”时，都必须在数据属性`message`中进行更新，在我们的示例中，即使用视图和视图的更改来更新模型
W
init  
wizardforcel 已提交
31 32 
3.  同时将其呈现在`<p>`标签中
W
2020-06-24 11:35:11  
wizardforcel 已提交
33 
通过将`v-model`指令添加到`<input>`标记并将“`message`”属性绑定到它，可以完成所有这三个步骤，
W
init  
wizardforcel 已提交
34 35 36 37 38 

```java
<input type="text" v-model="data_property_to_bind"></input>
```
W
2020-06-23 18:01:50  
wizardforcel 已提交
39 
**`Index.html`**
W
init  
wizardforcel 已提交
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 

```java
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
      <div>
        <!-- two-way binding with v-model -->
        Greeting Message:
        <input type="text" v-model="message"></input> 
        <p>The message is: {{ message }}</p>
      </div>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>
```
W
2020-06-23 18:01:50  
wizardforcel 已提交
65 
**`Index.js`**
W
init  
wizardforcel 已提交
66 67 68 69 70 71 72 73 74 75 

```java
new Vue({
  el: "#app",
  data: {
    message: "hi"
  }
});
```
W
2020-06-13 19:17:44  
wizardforcel 已提交
76 
因此，`v-model`指令告诉 vue.js 为输入字段和引号内提到的`message`数据属性设置双向绑定。 当然，所有这些都会以**反应**发生！
W
init  
wizardforcel 已提交
77 78 79 80 81 

初始输出如下。

![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)
W
2020-06-24 16:29:53  
wizardforcel 已提交
82 
<noscript><img alt="v-model initial output" class="alignnone size-full wp-image-14163" height="384" src="img/1fbc5015295fc979e5e228f95c136712.png" width="467"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p>图像的右半部分显示<a href="https://javabeginnerstutorial.com/vue-js/4-vue-devtools-setup/"> Vue DevTools </a>窗格。 也可以看到具有<code>message</code>属性及其值的<code>data</code>对象。</p><p>当我们将文本字段中的消息从“hi”更改为“hello”时，我们键入的每个字符都将在基础数据模型（如 Vue Devtools 中所示）上进行反应式更新，并在输出结果的视图中进行更新 在<code>&lt;p&gt;</code>标签中使用小胡子语法。</p><p><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/2_reactivity-1.jpg" height="379" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20470%20379'%3E%3C/svg%3E" width="470"/></p><noscript><img alt="reactivity with v-model" class="alignnone size-full wp-image-14164" height="379" src="img/39c5c156976147d4e25ea3115a06f7e9.png" width="470"/><p>我强烈建议您如图所示打开 Vue Devtools 并更改文本字段中的值，以查看此更改是被动发生的。 这将是您的盛宴！ 我可以保证。</p><h2>修饰符</h2><p>v 模型带有三个修饰符。 如果您错过了修饰符部分，请将检出<a href="https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/">。</a></p><p><strong>用法：</strong>遵循<code>v-model</code>指令，添加一个点并指定修饰符。</p><li><code>.lazy</code> – 在更改事件（而非输入事件）之后将输入与数据同步</li><pre><code class="language-html">&lt;input v-model.lazy="message"&gt;</code></pre><li><code>.number</code> – 用于将有效的输入字符串转换为数字</li><pre><code class="language-html">&lt;input v-model.number="age"&gt;</code></pre><li><code>.trim</code> – 自动修剪用户输入</li><pre><code class="language-html">&lt;input v-model.trim="message"&gt;</code></pre><p>该代码一如既往在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中可用。</p><p>试一试，并注意 Vue 如何根据输入类型是否为文本字段，复选框，单选按钮，选择，多选，文本区域元素等来正确更新元素……它看起来和听起来很神奇，因为所有语法 您需要完成一个简单的指令<code>v-model</code>来完成这项艰巨的任务。 如果遇到任何问题，请随时在评论部分大声疾呼。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/" title="15\. Form input bindings"> 15.表单输入绑定</a></h5></div></div> </body> </html></noscript>