6 數據綁定第 2 部分（屬性） · JavaBeginnersTutorial 中文系列教程

# 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](https://img.kancloud.cn/f5/18/f5183f0840c9ff0091fcc113b8a52db4_1043x591.png) 失望了嗎？這是發生了什么事。正如預期的那樣，“Vue 官方網站”文本已顯示為超鏈接。單擊它會打開一個新選項卡，因為我們使用了`_blank`作為目標（這里沒什么瘋狂的）。現在，查看地址欄中的 URL。不會像在 Vue 實例的數據對象中指定的那樣導航到 [https://vuejs.org/v2/guide/index.html](https://vuejs.org/v2/guide/index.html)，而是將`href`屬性的雙引號內的值當做字符串，并解析為 URL `{{ vueLink }}`。這就是普通 HTML `href`屬性的工作方式，這就是您在新打開的標簽頁的地址欄中看到的內容。顯然，綁定從未發生過。因此，這就是 Vue 的工作方式。我們不能將模板語法/大括號括起來用于 HTML 屬性綁定。但是，如果我們仍然想將某些東西動態綁定到屬性上怎么辦？不要擔心！ Vue 附帶了另一個用于此目的的指令`v-bind`。只要我們花時間尋找指令，指令就在我們周圍。在這種情況下，使用`v-bind`指令告訴 Vue.js 將`data`屬性的值綁定到該指令后面的屬性名稱。 ### 語法 `v-bind:html_attribute=”data_to_be_bound` ### 示例 `v-bind:href="vueLink"` 讓我們嘗試執行此代碼并檢查輸出。 ![Attribute v-bind](https://img.kancloud.cn/ba/4b/ba4bba2590a1e0c201075820edc1d8b5_1061x589.png) 奇跡般有效！單擊呈現的鏈接將打開一個新標簽，該標簽具有預期的指定鏈接。 ## 其他示例場景 1. 在網頁上動態顯示圖片，即，當在 Vue 實例的數據對象中更改圖片位置時，應該在網頁上自動更新圖片。 2. 根據綁定到該字段的數據值啟用或禁用輸入字段。讓我們一次處理一種情況。到最后，您將對 Vue.js 表現出超出預期的表現。 ### 1.動態顯示圖像讓我們將 Vue 的徽標圖像放置在與代碼相同的文件夾中，并將其在數據對象中的位置指定為`logo`。將`<img>`標記的`src`屬性綁定到`logo`屬性的值。 ```html <img v-bind:src="logo" width="70" height="50"/> ``` 圖像將按預期渲染到 DOM。將您的帽子戴上戒指，并嘗試更改圖像位置是否動態更新渲染的圖像。如果您在執行此操作時遇到任何挑戰，請在評論部分給我大喊。輸出如下， ![v-bind image](https://img.kancloud.cn/48/64/48647279224eec96546d71b6cfe6bb3a_833x497.png) ### 2.根據綁定的值啟用或禁用輸入字段是時候做同樣的歌舞了！在 Vue 實例的數據對象中，讓我們擁有`isInputDisabled`屬性，并將其值設置為`true` ```jsscript isInputDisabled: true ``` 讓我們將其綁定到輸入標簽的`disable`屬性。 ```html <input v-bind:disabled="isInputDisabled"/> ``` 這會將禁用的屬性綁定到所提到的屬性的值，并禁用輸入字段。使用 Chrome 開發者工具檢查該元素會顯示其相應的 HTML 代碼，如下所示， ![v-bind input disabled](https://img.kancloud.cn/e6/4d/e64d96ff2c5b428f731e0fa8fdfe8b7d_379x491.png) 現在讓我們將`isInputDisabled`的值更改為`false`。 ```jsscript isInputDisabled: false ``` 有趣的是，如果禁用的屬性值為`false`，`null`或`undefined`，則甚至不包含在呈現的`<input>`元素中（使用開發人員工具檢查該元素）。 ![v-bind input enabled](https://img.kancloud.cn/0a/44/0a445d2097f623a942aed216490c5127_368x454.png) 完整的代碼如下， ### `Index.html` ```html <!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">  <h1>{{ message }}</h1> <p> <input v-bind:disabled="isInputDisabled"/> </p> <div> <img v-bind:src="logo" width="70" height="50"/> <br/> <a v-bind:href="vueLink" target="_blank">Vue official website</a> </div> </div>  <script src="index.js"></script> </body> </html> ``` ### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi", isInputDisabled: false, logo: "vueLogo.png", vueLink: "https://vuejs.org/v2/guide/index.html" } }); ``` 上面討論的所有代碼都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。啟動您喜歡的 IDE，并編寫一些自己的方案！如有任何疑問，請隨時在“評論”部分中進行提問。另一個有趣的概念很快見！