Vue.js / class & style

Blog / 2021-01-11

我們在寫 Vue.js 的 HTML template 的時候,tag 裡面常常會有一些參數,通常這些參數只有一個,譬如 <input value="..."> <a href="...">。這種都好解決,用 Vue 綁定一個 data 就可以了。但是如果是 class 跟 style,他們都是一次有好多值在裡面的 <div class="foo bar wrapper">,這要怎麼處理呢?

class

先來看看 class,第一種最常見的作法是用 object 的方式來做

object

Object 是 key / value pair,key 代表的是有機會出現的 class name,value (boolean) 則是決定了這個 class name 要不要出現。
所以像範例中的 active 是預選的 class name,至於這個 class name 會不會出現,則是看 isActive 的值,如果是 true 就會印出 active 這個 class,否則就不印。

另外,動態 的 class name 也可以跟 靜態 的 class name 一起寫(請看上圖第二個 div)。如果有確定要的 class name 就直接寫出來(class="..."),另外需要用變數控制的再用 :class="{...}" 控制即可。

直接指定 data object

剛剛的做法是直接寫在 HTML template 裡面,我們也可以把 :class="{...}" 裡面的 object 直接放到 data 裡面。
這個作法其實是一樣的,只是 object 放的位置不同罷了。

Array:直接把參數的值帶入

如果你想直接把 data 裡面的值當作 class name 的話,也可以用 Array 的做法,直接把值帶進去。

以上是 class 的做法,style 的架構也很類似,我們接著來看看:

style

Object

使用方法跟 class 一樣,用 value 來控制 key 會不會變成 class name。

Array

Array 在 style 裡面的作法就不一樣了,畢竟 CSS 會有很多種設定,我們可以透過各種不同的設定 (object),一次丟到這個 :style="[...]" Array 裡面。這樣的作法會把多個不同的 CSS 設定直接整合。就像我們在寫 CSS 一樣,可能會有很多支 CSS 檔案,彼此覆寫重複的 CSS 屬性。

像這個例子,baseStyle 有 color 跟 font-size、overridingStyles 有 color 跟 padding,後者的 color 就會覆寫前者的 color。結果就會變成:

color: 'blue'; font-size: '13px'; padding: '10px';

這樣的結果

本內容擷取自 Vue.js 123
有興趣學習 Vue.js 的朋友歡迎去看看喔:)

background

訂閱「網頁15天」最新技術分享

訂閱