回首Vue3之指令篇（六）

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰

這篇文章咱們來說一下v-bind的使用方法，以及在使用它的時候咱們須要注意的地方。

如何使用

v-bind指令：動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。在綁定 class 或 style attribute 時，支持其它類型的值，如數組或對象。

v-bind可簡寫爲:。

綁定 attribute

//固定綁定
<img :src="imageSrc" />

//動態綁定
<button :[key]="value"></button>
複製代碼

從上述代碼能夠看出，咱們不只能夠固定的綁定一個屬性，還能夠去動態的綁定一個屬性。

class 綁定

//對象
<div :class="{ red: isRed }"></div>

//數組
<div :class="[classA, classB]"></div>

//數組對象
<div :class="[classA, { classB: isB, classC: isC }]">

//動態數據，能夠是一個字符串，也能夠是個對象
<div :class="class"></div>

//表達式，三元運算
<div :class="isTrue?'trueClass':'falseClass'"></div>
複製代碼

從上述代碼能夠看出，咱們能夠根據本身的需求選擇一個合適的class綁定方法，class綁定在咱們項目開發中常常用到，好比狀態切換，動態的改變樣式等。

style 綁定

//對象
<div :style="{ fontSize: size + 'px' }"></div>

//數組
<div :style="[styleObjectA, styleObjectB]"></div>

//多重值 只會渲染數組中最後一個被瀏覽器支持的值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
複製代碼

從上述代碼能夠看出，咱們能夠根據本身的需求選擇一個合適的style綁定方法。

注意事項

值得咱們注意的是：

1. 上述內容咱們也能夠用模板字符串來寫。

<div :style="{ fontSize: `${size}px`}"></div>
複製代碼

2. .camel 修飾符容許在使用 DOM 模板時將 v-bind property 名稱駝峯化

//編譯前
<svg :view-box.camel="viewBox" :test-test.camel="viewBox"></svg>
<div :test-test.camel="viewBox"></div>

//編譯後
<svg viewBox="viewBox" testTest="viewBox"></svg>
<div testtest="viewBox"></div></div>
複製代碼

從上述代碼能夠看出，SVG 的 viewBox property和自定義屬性是駝峯化，而div的自定義屬性僅僅是合在一塊兒，在使用的時候咱們須要注意一下。

3. v-bind 合併行爲在Vue3與Vue2中的差別

在Vue2中，單獨的 property 老是會覆蓋 v-bind="object" 中的綁定,以下：

//編譯前
<div id="red" v-bind="{ id: 'blue' }"></div>
或
<div v-bind="{ id: 'blue' }" id="red" ></div>

//編譯後
<div id="red"></div>
複製代碼

在Vue3中，單獨的 property 與 v-bind="object" 的合併是按順序覆蓋的,以下：

//編譯前
<div id="red" v-bind="{ id: 'blue' }"></div>
//編譯後
<div id="blue"></div>

//編譯前
<div v-bind="{ id: 'blue' }" id="red" ></div>
//編譯後
<div id="red"></div>
複製代碼

總結

1. 在Vue3中，若是一個元素同時定義了 v-bind="object" 和一個相同的單獨的 property，那麼聲明綁定的順序決定了它們如何合併。

2. CSS property 名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。

3. 根據本身的需求場景來選擇合適的使用方式。