亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE v-bind 數(shù)據(jù)綁定的示例詳解

 更新時(shí)間：2023年05月10日 09:43:08   作者：honeymoose  
這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡(jiǎn)單點(diǎn)來說就是對(duì) HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動(dòng)態(tài)的數(shù)據(jù)輸出，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

動(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)文章

最新評(píng)論