iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

每天來點 Vue.js 吧系列 第 10

Vue Class Bindings

tags: Vuejs

樣式渲染

畫面的呈現有時會因應資料的不同,產生不同的視覺樣式,而通常我們會使用 v-bind 指令動態渲染 HTML attribute class,透過更換、新增 class 去切換不同的樣式呈現,達到想呈現給用戶的畫面樣式。在綁定多個 class 時,可以使用 expression 拼接多個字串內容,但是這同時為我們帶來了字串拼接麻煩且容易出錯的缺點:

下方為拼接字串的簡單範例,我們可以看到使用字串拼接的攏長:

<p v-bind:style="styleTextOne + styleTextTwo + styleThree">{{ text }}</p>

不過,其實有更好的解決方式,Vue 注意到了該項需求,並在 v-bind 指令上,針對 classstyle 樣式屬性進行了增強,可以填入的內容除了 expression 外,還可以填入 ArrayObject 兩種格式,幫助我們更加靈活的渲染 classstyle,以下列出 v-bind 針對 class 的增強用法:

v-bind:calss

Object 語法 ✐

對於 v-bind:calss 可以填入 v-bind:class="{}",動態切換渲染多個 class,同時普通的 class attribute 仍可以同時使用,每個 key 對應想渲染的 class 名稱,該 class 會依所填入 valuetruthyfalsy 決定是否渲染該 class,當為 truthy 則渲染;反之則不會渲染該樣式。

下方簡單的練習,透過 v-bind:class="{}" 渲染多個 class

  • red -> isRedtrue -> 該 class 會渲染。
  • bold -> isBoldfalse -> 該 class 不會渲染。
  • letter-space -> isSpacingtrue -> 該 class 會渲染。
const vm = new Vue({
    el: '#app',
    template: `<p :class="{ red: isRed, bold: isBold, 'letter-space': isSpacing  }">text</p>`,
    data: {
        isRed: true,
        isBold: false,
        isSpacing: true,
    },
    computed: {

    },
})

對比字串形式,一切變得更加簡潔、靈活。
除此之外,我們也可以將剛剛的物件移入到 data 簡化模板中攏長的物件呈現。

const vm = new Vue({
  el: "#app",
  template: `<p :class="styleObj">text</p>`,
  data: {
    styleObj: {
      red: true,
      bold: true,
      "letter-space": true,
    },
  },
});

我們也可以填入 computed 進行靈活的運算,是一個方便的應用方式,下方列出了使用 computed 的範例:

const vm = new Vue({
    el: "#app",
    template: `<p :class="styleObj">text</p>`,
    data: {
        isRed: true,
        isBold: true,
        isActive: true
    },
    computed: {
        styleObj(){
            return {
                red: this.isRed && !this.isActive,
                bold: this.isBold && this.isActive
            }
        }
    },
  });

可以看到使用 computed 使我們可以進行靈活的運算,同時保持模板整潔的優點。

Array 語法 ✐

看完了物件語法,現在則來到 Array,填入 Array 可以動態渲染多個 class,當我們要動態渲染一拖拉固的 class 時為一個好選擇,另外若是需要根據條件切換,可以使用 三元運算子

下方列出使用 Array 的簡單範例,並且加入了 三元運算子 條件切換 bold

const vm = new Vue({
    el: "#app",
    template: `<p :class="[errorClass, isBold ? 'bold' : '']">text</p>`,
    data: {
        errorClass: 'button-danger',
        isBold: true,
        isActive: true
    }
  });

當有多個條件切換時,可以在 Array 寫入 ObjectObject 用法同上,幫助減少呈現繁瑣的多個 三元運算子

const vm = new Vue({
  el: "#app",
  template: `<p :class="['red', { bold: isBold }]">text</p>`,
  data: {
    isRed: true,
    isBold: true,
    isActive: true,
  },
});

以上為此次內容,感謝看到這裡的你,我們明天見。


若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM


參考資料:

  1. Vuejs.org 2.x

上一篇
Vue computed 與 watch 差異
下一篇
Vue Conditional Rendering 條件渲染
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言