VUE v-bind 數(shù)據(jù)綁定的示例詳解
動態(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
解決報錯ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報錯ValidationError: Progress Plugin Invalid Options問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關于VUE3引入html文件并傳值的相關資料,這是最近在項目中遇到了的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了vue2實現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項式API?組合式API以及setup三種不同實現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
Ant Design Vue是使用Vue實現(xiàn)的遵循Ant Design設計規(guī)范的高質(zhì)量UI組件庫,用于開發(fā)和服務于企業(yè)級中后臺產(chǎn)品,下面這篇文章主要給大家介紹了關于vue中ant-design-vue組件安裝與使用的相關資料,需要的朋友可以參考下2022-04-04
vue $set 實現(xiàn)給數(shù)組集合對象賦值
這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
vue3+typescript實現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue項目自動設置請求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
在現(xiàn)代社會中,了解血型遺傳規(guī)律對于優(yōu)生優(yōu)育、醫(yī)療健康等方面都有重要意義,本文將介紹如何使用Uniapp開發(fā)一個跨平臺的血型遺傳查詢工具,幫助用戶預測孩子可能的血型,感興趣的朋友一起看看吧2025-04-04