Je code donc je suis là.

0%

Vue.js Class & Style Bindings 樣式的綁定

Posted on Edited on In

當我們在瀏覽網頁時，透過使用者的輸入或互動，最容易會有變動的就是資料（透過輸入或修改）和樣式（透過互動或事件）的更動，而 VueJs 的樣式部分用 class 和 style 的綁定，就是專門用來與互動產生動態的樣式而來的。

去 codepen 看看效果

Binding HTML Classes / 綁定 HTML 裡 Class 的方法

在 DOM 的節點上使用:class='xxx' xxx 可以是字串、物件或者是陣列型態。
這裡我們先設置了三個樣式分別為ClassA、ClassB、ClassC，我們在「xxx 是字元串」這個段落先給它一個基礎樣式ClassC，再綁定myClass，這會對應到 vm 實例裡data的ClassA，所以在這一段會有兩個樣式分別是ClassA＋ClassC。

CSS 的部分：

1
2
3
4
5
6
7
8
9
10
11
12
.ClassA {
  color: red;
}

.ClassB {
  color: blue;
  background: yellow;
}

.ClassC {
  font-size: 30px;
}

在「xxx 是物件」這個段落，我們以物件的方式綁定樣式，:class="{classA:isActive, classB:!isActive}"，記得以物件綁定的話可以給多組樣式，但是一定要是以key:value的方式寫，這裏我們以classB:!isActive把classB設為非 isActive，這個樣式就不會被顯示。

另一段「xxx 是陣列」的段落是以陣列的方式綁定，既然是陣列就可以給多個值，但這種方式比較不常用，以物件的方式還是比較靈活。

Binding Inline Styles / 綁定行內 style 的方法

使用 Style 綁定的方法也很方便，我們先創建一個叫Update的按鍵，使用v-on:click等同@click="Update"去呼叫實例中methods的Update的方法，並指定這個事件被觸發時，某些屬性的值會跟著改變。
我們在這個段落初始的樣式以物件型態給值，初始化的顏色為{activeColor: 'gray',fontSize:20px}，按下按鍵時呼叫Update的方法後activeColor和fontSize的值會被變更為Update方法裡的設定：pink和30px。

HTML 的部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <h2>class綁定: :class='xxx'</h2>
  <p class="classC" :class="myClass">xxx是字元串</p>
  <p :class="{classA:isActive, classB:!isActive}">xxx是物件</p>
  <p :class="[myClass,hasClass ]">xxx是陣列</p>
  <!-- 比較少用 -->
  <button @click="Update">Update</button>

  <h2>style綁定</h2>
  <p :style="{color: activeColor, fontSize: fontSize + 'px'}">
    color: activeColor, fontSize: fontSize + 'px'
  </p>
  <!-- activeColor 和 fontSize 需要去 data 初始化 -->
</div>

VueJs 的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const vm = new Vue({
  el: '#app',
  data: {
    myClass: 'classA',
    hasClass: 'classB',
    isActive: false,
    activeColor: 'gray',
    fontSize: 20,
  },
  methods: {
    Update() {
      this.myClass = this.hasClass;
      this.isActive = true;
      this.activeColor = 'pink';
      this.fontSize = 30;
    },
  },
});

Class 和 Style 的綁定對於控制樣式或狀態切換來說是很方便的，在處理許多互動狀態的設計上應該會蠻常用到的。

今天是情人節，無論有沒有情人，我們都要愛自己，才會有能力愛人或是吸引其他人來愛你。
十幾年前曾經聽過一句頗浪漫的情人節話語：「如果我的生活是 HTML，你(妳)就是我的 CSS。」當時 JavaScript 還沒那麼重要，不過以現在的發展狀況而言，JavaScript，它是我的精神伴侶。
情人節快樂！

補充：
另一個 Vue Master 的課程裡有看到樣式綁定的方法，補充當時做的筆記：

Class Bindings 樣式類別綁定

綁定 style 的方式有以下幾種

第一種，以語法糖的方式在 html 裡做 data 和樣式的繫結

1
2
3
4
5
6
7
8
<h1 :style="{color:color}">...</h1>
<p :style="{fontSize:fontSize}">...</p>
<script>
  data: {
    color: 'reg';
    fontSize: '13px';
  }
</script>

第二種，以物件的方式

1
2
3
4
5
6
7
8
9
<span :style="styleObject">...</span>
<script>
  data: {
    styleObject: {
      color: 'reg';
      fontSize: '13px';
    }
  }
</script>

第三種，以陣列的方式

1
2
3
4
5
6
7
8
9
10
11
12
<p :style="[styleObject,styleObject2]">...</p>
<script>
  data:{
    styleObject: {
          color: 'reg',
          fontSize: '13px'
        }
        styleObject2: {
          margin: '5px',
          padding: '20px'
        }
  }

以布林值決定是否繫結與顯示樣式

1
2
3
4
5
6
7
8
9
10
11
12
<div
  class="color-box"
  :class="{active: activeClass, 'text-danger': errorClass}"
>
  ...
</div>
<script>
  data:{
    activeClass:true,
    errorClass:false,
  }
</script>

物件 + 布林值方式

1
2
3
4
5
6
7
8
9
<div class="classObject">...</div>
<script>
  data:{
    classObject:{
      active:true,
      danger:false,
    }
  }
</script>

陣列方式

1
2
3
4
5
6
7
<div class="[classObject, errorClass]">...</div>
<script>
  data:{
    activeClass:'active',
    errorClass: 'text-danger',
    }
</script>

條件式

1
2
3
4
5
6
7
<div class="[isActive ? activeClass : '']">...</div>
<script>
  data:{
    isActive:true,
    activeClass:'active',
    }
</script>