# 6.数据绑定第 2 部分（属性）

> 原文： [https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/](https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/)

在我们的[上一篇文章](https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/)中，我给了您一些思考。 记得？ 属性绑定！ 是时候深入了解它了。 众所周知，示例有助于我们更轻松地理解概念。 那么，我们还等什么呢？

假设我们有一个锚标记，我们想将链接绑定到`href`属性。 让我们尝试使用文本插值技术（模板语法）来执行此操作，然后检查结果。

![Attribute binding with template syntax](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201043%20591'%3E%3C/svg%3E)

<noscript><img alt="Attribute binding with template syntax" class="alignnone size-full wp-image-14067" height="591" src="img/1ed51c59dd82a5d6011f7e594f0eb2cc.png" width="1043"/><p>失望了吗 这是发生了什么事。 正如预期的那样，“Vue 官方网站”文本已显示为超链接。 单击它会打开一个新选项卡，因为我们使用了<code>_blank</code>作为目标（这里没什么疯狂的）。 现在，查看地址栏中的 URL。 不会像在 Vue 实例的数据对象中指定的那样导航到<a href="https://vuejs.org/v2/guide/index.html"> https://vuejs.org/v2/guide/index.html </a>，而是处理<code>href</code>属性的双引号内的值 作为字符串并解析为 URL <code>“{{ vueLink }}”</code>。 这就是普通 HTML <code>href</code>属性的工作方式，这就是您在新打开的标签页的地址栏中看到的内容。 显然，绑定从未发生过。</p><p>因此，这就是 Vue 的工作方式。 我们不能将模板语法/大括号括起来用于 HTML 属性绑定。 但是，如果我们仍然想将某些东西动态绑定到属性上怎么办？ 不要担心！ Vue 附带了另一个用于此目的的指令<strong> v-bind </strong>。 只要我们花时间寻找指令，指令就在我们周围。</p><p>在这种情况下，使用 v-bind 指令告诉 Vue.js 将 data 属性的值绑定到该指令后面的属性名称。</p><h3><strong>语法，</strong></h3><p><code data-enlighter-language="html">v-bind:html_attribute=”data_to_be_bound”</code></p><h3><strong>示例，</strong></h3><p><code data-enlighter-language="html">v-bind:href="vueLink"</code></p><p>让我们尝试执行此代码并检查输出。</p><p><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/5_v-bind-href-1.jpg" height="589" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201061%20589'%3E%3C/svg%3E" width="1061"/></p><noscript><img alt="Attribute v-bind" class="alignnone size-full wp-image-14068" height="589" src="img/1c1eaeb83683a2a7a6da93a84bae0124.png" width="1061"/><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>奇迹般有效！ 单击呈现的链接将打开一个新标签，该标签具有预期的指定链接。</p><h2><strong>其他示例场景</strong></h2><ol><li>在网页上动态显示图片，即，当在 Vue 实例的数据对象中更改图片位置时，应该在网页上自动更新图片。</li><li>根据绑定到该字段的数据值启用或禁用输入字段。</li></ol><p>让我们一次处理一种情况。 到最后，您将对 Vue.js 表现出超出预期的表现。</p><h3>1.动态显示图像</h3><p>让我们将 Vue 的徽标图像放置在与代码相同的文件夹中，并将其在数据对象中的位置指定为<code>logo</code>。 将<code>&lt;img&gt;</code>标记的<code>src</code>属性绑定到<code>logo</code>属性的值。</p><pre><code class="language-html">&lt;img v-bind:src="logo" width="70" height="50"/&gt;</code></pre><p>图像将按预期渲染到 DOM。 将您的帽子戴上戒指，并尝试更改图像位置是否动态更新渲染的图像。 如果您在执行此操作时遇到任何挑战，请在评论部分给我大喊。 输出如下，</p><p><img alt="v-bind image" class="alignnone size-full wp-image-14069" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/6_v-bind-img.jpg" height="497" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20833%20497'%3E%3C/svg%3E" width="833"/></p><noscript><img alt="v-bind image" class="alignnone size-full wp-image-14069" height="497" src="img/68590a95dc9a52eaf5e90bf9aeee24f6.png" width="833"/><h3>2.根据绑定的值启用或禁用输入字段</h3><p>是时候做同样的歌舞了！</p><p>在 Vue 实例的数据对象中，让我们拥有<code>“isInputDisabled”</code>属性，并将其值设置为<code>true</code></p><pre><code class="language-javascript">isInputDisabled: true</code></pre><p>让我们将其绑定到输入标签的 disable 属性。</p><pre><code class="language-html">&lt;input v-bind:disabled="isInputDisabled"/&gt;</code></pre><p>这会将禁用的属性绑定到所提到的属性的值，并禁用输入字段。 使用 Chrome 开发者工具检查该元素会显示其相应的 HTML 代码，如下所示，</p><p><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/7_v-bind-disabled-input-1.jpg" height="491" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20379%20491'%3E%3C/svg%3E" width="379"/></p><noscript><img alt="v-bind input disabled" class="alignnone size-full wp-image-14070" height="491" src="img/1360c77ec1d6e0f9343d6ac614a06dd7.png" width="379"/><p>现在让我们将<code>“isInputDisabled”</code>的值更改为<code>false</code>。</p><pre><code class="language-javascript">isInputDisabled: false</code></pre><p>有趣的是，如果禁用的属性值为<code>false</code>，<code>null</code>或<code>undefined</code>，则甚至不包含在呈现的<code>&lt;input&gt;</code>元素中（使用开发人员工具检查该元素）。</p><p><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" data-lazy-sizes="(max-width: 368px) 100vw, 368px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" height="454" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20368%20454'%3E%3C/svg%3E" width="368"/></p><noscript><img alt="v-bind input enabled" class="alignnone size-full wp-image-14063" height="454" sizes="(max-width: 368px) 100vw, 368px" src="img/8dd45bfd613195974e521992d039b42a.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input.jpg 368w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/8_v-bind-enabled-input-243x300.jpg 243w" width="368"/><p>完整的代码如下，</p><h3>Index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;!-- text interpolations --&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;p&gt; &lt;input v-bind:disabled="isInputDisabled"/&gt; &lt;/p&gt; &lt;div&gt; &lt;img v-bind:src="logo" width="70" height="50"/&gt; &lt;br/&gt; &lt;a v-bind:href="vueLink" target="_blank"&gt;Vue official website&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><h3>Index.js</h3><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", isInputDisabled: false, logo: "vueLogo.png", vueLink: "https://vuejs.org/v2/guide/index.html" } });</code></pre><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>启动您喜欢的 IDE，并编写一些自己的方案！ 如有任何疑问，请随时在“评论”部分中进行提问。 另一个有趣的概念很快见！</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/7-conditional-rendering-part-1/" title="7\. Conditional rendering Part 1 (v-if, v-else, v-else-if)"> 7.条件渲染第 1 部分（v-if，v-else，v-else-if）</a></h5></div></div> </body> </html></noscript>