動態(tài)的綁定一個或多個 attribute，也可以是組件的 prop。

• 縮寫： : 或者 . (當使用 .prop 修飾符)
• 期望： any (帶參數(shù)) | Object (不帶參數(shù))
• 參數(shù)： attrOrProp (可選的)
• 修飾符：
  • .camel ——將短橫線命名的 attribute 轉(zhuǎn)變?yōu)轳劮迨矫?/li>
  • .prop ——強制綁定為 DOM property。3.2+
  • .attr ——強制綁定為 DOM attribute。3.2+

用途

當用于綁定 class 或 style attribute，v-bind 支持額外的值類型如數(shù)組或?qū)ο?。詳見下方的指南鏈接。在處理綁定時，Vue 默認會利用 in 操作符來檢查該元素上是否定義了和綁定的 key 同名的 DOM property。

如果存在同名的 property，則 Vue 會把作為 DOM property 賦值，而不是作為 attribute 設置。這個行為在大多數(shù)情況都符合期望的綁定值類型，但是你也可以顯式用 .prop 和 .attr 修飾符來強制綁定方式。有時這是必要的，特別是在和自定義元素打交道時。

當用于組件 props 綁定時，所綁定的 props 必須在子組件中已被正確聲明。當不帶參數(shù)使用時，可以用于綁定一個包含了多個 attribute 名稱-綁定值對的對象。

示例

<!-- 綁定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 動態(tài) attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 縮寫 -->
<img :src="imageSrc" />
<!-- 縮寫形式的動態(tài) attribute 名 -->
<button :[key]="value"></button>
<!-- 內(nèi)聯(lián)字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定對象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 綁定?！皃rop” 必須在子組件中已聲明。 -->
<MyComponent :prop="someThing" />
<!-- 傳遞子父組件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

使用

簡單點來說就是對 HTML 中的元素，我們可以使用 v-bind 來進行綁定和動態(tài)的數(shù)據(jù)輸出。

一個最簡單的使用例子就是下面的我們需要根據(jù)我們返回的數(shù)據(jù)動態(tài)綁定一個圖片。

<img
   v-bind:src="item.blogCover"
   alt=""
   class="img-thumbnail"
   />

上面的代碼，中的 item.blogCover 是我們從 JSON 返回對象中獲得的數(shù)據(jù)，我們可以使用這個內(nèi)置操作符將上面的圖片的鏈接綁定到圖片的 SRC 屬性上。

通過上圖綁定后，我們就可以完成圖片的動態(tài)顯示了。

到此這篇關于VUE v-bind 數(shù)據(jù)綁定的文章就介紹到這了,更多相關vue數(shù)據(jù)綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論