iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 13

[前端暴龍機,Vue2.x 進化 Vue3 ] Day13.Class 與 Style 綁定

除了資料的操作, Vue 也還可以跟 網頁樣式 有關係,除了內容可以用 v-if 做切換,擁有會員資格的是不是也可以讓它的介面更華麗呢? 趕快來看看~

v-bind (縮寫 : )

像是 Class、Style、src ... 等屬性,都可以透過 v-bind 的綁定來做動態切換效果

Class 綁定

  • 物件綁定方式

    <div v-bind:class="{ class名稱: isActive , class名稱: hasError}"></div>
    // ...
    data: {
      isActive: true,
      hasError: false
    }
    

    使用方式為 class名稱: boolean(true/false),依照 boolean 去控制是否套用該 class

    如何給定 boolean 值?

    可以直接給 true/false ,但是就無法動態切換

    <div v-bind:class="{ class名稱: true , class名稱: false}"></div>
    

    可以給變數 操作變數的 true/false 達成動態切換

    <div v-bind:class="{ class名稱: isActive }"></div>
    // ...
    data: {
      isActive: true,
    }
    

    可以透過物件定義完畢綁上去

    <span :style="styleObject"></span>
    // ...
    data: {
        styleObject: {
            background: 'red',
            width: '150px',
            height: '150px',
        }
    }
    
  • 陣列綁定方式

    <div v-bind:class="[activeClass, errorClass]"></div>
    // ...
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
    

    可以透過三元表達式切換 class

    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    // ...
    data: {
       isActive: false,
       activeClass: 'active',
       errorClass: 'text-danger'
    }
    
    // 就會渲染成 <div class="errorClass"></div>
    

Style 綁定

用法跟 :class 相像,不過雖然看起來像 css,其實是一個 JavaScript 對象(可以與變數及字串相加的動作)
CSS property 名稱可用 小駝峰(camelCase)或者短橫線分隔(kebab-case,記得用引號括起來) 來命名,如下列範例

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px','border-right': `2px solid ${activeColor}`}">123</div>
// ...
data: {
  activeColor: 'red',
  fontSize: 30
}

同樣可以透過物件定義完畢綁上去

<div v-bind:style="objStyle">textConent</div>
// ...
data: {
    objStyle:{
        color : 'red',
        fontSize: "30px",
        'border-right': "2px solid blue"
    }
}

如果綁定的內容太多,可運用此方式,使得模板更清晰


參考資料

Vue 官方文件


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day12.事件處理
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day14.監聽器
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言