VUE v-bind 數(shù)據(jù)綁定的示例詳解
動(dòng)態(tài)的綁定一個(gè)或多個(gè) attribute，也可以是組件的 prop。
- 縮寫：
:或者.(當(dāng)使用.prop修飾符) - 期望：
any (帶參數(shù)) | Object (不帶參數(shù)) - 參數(shù)：
attrOrProp (可選的) - 修飾符：
.camel——將短橫線命名的 attribute 轉(zhuǎn)變?yōu)轳劮迨矫?/li>.prop——強(qiáng)制綁定為 DOM property。3.2+.attr——強(qiáng)制綁定為 DOM attribute。3.2+
用途
當(dāng)用于綁定 class 或 style attribute，v-bind 支持額外的值類型如數(shù)組或?qū)ο?。詳見下方的指南鏈接。在處理綁定時(shí)，Vue 默認(rèn)會(huì)利用 in 操作符來檢查該元素上是否定義了和綁定的 key 同名的 DOM property。
如果存在同名的 property，則 Vue 會(huì)把作為 DOM property 賦值，而不是作為 attribute 設(shè)置。這個(gè)行為在大多數(shù)情況都符合期望的綁定值類型，但是你也可以顯式用 .prop 和 .attr 修飾符來強(qiáng)制綁定方式。有時(shí)這是必要的，特別是在和自定義元素打交道時(shí)。
當(dāng)用于組件 props 綁定時(shí)，所綁定的 props 必須在子組件中已被正確聲明。當(dāng)不帶參數(shù)使用時(shí)，可以用于綁定一個(gè)包含了多個(gè) attribute 名稱-綁定值對(duì)的對(duì)象。
示例
<!-- 綁定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 動(dòng)態(tài) attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 縮寫 -->
<img :src="imageSrc" />
<!-- 縮寫形式的動(dòng)態(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>
<!-- 綁定對(duì)象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 綁定。“prop” 必須在子組件中已聲明。 -->
<MyComponent :prop="someThing" />
<!-- 傳遞子父組件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>使用
簡(jiǎn)單點(diǎn)來說就是對(duì) HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動(dòng)態(tài)的數(shù)據(jù)輸出。
一個(gè)最簡(jiǎn)單的使用例子就是下面的我們需要根據(jù)我們返回的數(shù)據(jù)動(dòng)態(tài)綁定一個(gè)圖片。
<img v-bind:src="item.blogCover" alt="" class="img-thumbnail" />
上面的代碼，中的 item.blogCover 是我們從 JSON 返回對(duì)象中獲得的數(shù)據(jù)，我們可以使用這個(gè)內(nèi)置操作符將上面的圖片的鏈接綁定到圖片的 SRC 屬性上。
通過上圖綁定后，我們就可以完成圖片的動(dòng)態(tài)顯示了。
到此這篇關(guān)于VUE v-bind 數(shù)據(jù)綁定的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid Options問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關(guān)于VUE3引入html文件并傳值的相關(guān)資料,這是最近在項(xiàng)目中遇到了的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項(xiàng)式API?組合式API以及setup三種不同實(shí)現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
Ant Design Vue是使用Vue實(shí)現(xiàn)的遵循Ant Design設(shè)計(jì)規(guī)范的高質(zhì)量UI組件庫,用于開發(fā)和服務(wù)于企業(yè)級(jí)中后臺(tái)產(chǎn)品,下面這篇文章主要給大家介紹了關(guān)于vue中ant-design-vue組件安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
vue3+typescript實(shí)現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實(shí)現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
為vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法
這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
在現(xiàn)代社會(huì)中,了解血型遺傳規(guī)律對(duì)于優(yōu)生優(yōu)育、醫(yī)療健康等方面都有重要意義,本文將介紹如何使用Uniapp開發(fā)一個(gè)跨平臺(tái)的血型遺傳查詢工具,幫助用戶預(yù)測(cè)孩子可能的血型,感興趣的朋友一起看看吧2025-04-04