Vue - 動態切換 Class 及 Style 的方法

發表於 | 更新於: | 分類於 |

先將等等會用到的 CSS 寫好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.box {
  width: 150px;
  height: 150px;
  outline: 1px solid black;
  margin-top: 50px;
  margin-left: 50px;
  transition: all 0.5s ease-out;
}

.rotate {
  transform: rotate(45deg);
}

.redColor {
  background: red;
  outline: none;
}

.bg-danger {
  color: red;
}

.radius {
  border-radius: 100%;
}

Class 樣式

行內物件實體

這個方式是我自己最常使用的，直接將物件寫在 :class 內，物件屬性為 class 名稱，值為條件判斷的參數。

1
<div class="box" :class="{'rotate' : box.isTransform, 'bg-danger': box.isColor}"></div>

還需要有條件判斷的參數

1
2
3
4
5
6
7
8
let app = new Vue({
  el: '#app',
  data:{
    box: {
      isTransform: false
      bg-danger: false
    }
  }

可以透過 點擊事件 或是 checkbox 來簡單操作條件判斷參數

這邊要注意在 HTML 內使用 - 是會報錯的，特殊情況(符號)時不可使用 . ，而需使用 [] 的物件寫法代替。

1
2
<input type="checkbox" v-model="box.isTransform">
<input type="button" value="rotate!" @click="box['bg-danger'] = !box['bg-danger']">

將 Class 列表以物件型態宣告在 Vue data 內

這個方式雖然個人不常使用，但是寫起來更為簡潔好管理，可以讓 HTML 程式碼保持乾淨。

1
<div class="box" :class="classList"></div>

宣告 Class 列表物件

1
2
3
4
5
6
7
let app = new Vue({
  el: '#app',
  data:{
    classList: {
      rotate: false,
      redColor: false,
    }

同樣可以來簡單操作條件判斷參數，不同的是這次是物件所以我們也用物件的方式來操作條件的布林值參數

1
2
<input type="checkbox" v-model="classList.rotate">
<input type="button" value="rotate!" @click="classList.redColor = !classList.redColor">

我們還可以寫一些函式，透過操作物件實踐動態新增 Class 樣式

1
2
3
4
5
methods: {
  addSomeNewClass(className) {
    this.classList[className] = true;
  } 
}

使用

1
<input type="button" value="addClass!" @click="addSomeNewClass('radius')">

陣列

和剛剛的物件例子很相似，同樣可以直接將 Class 清單的陣列寫在行內，或是宣告在 Vue 應用程式的 data 中。寫在行內的情況較少，這邊只舉第二個例子。

1
<div class="box" :class="classArr"></div>
1
2
3
4
let app = new Vue({
  el: '#app',
  data:{
    classArr: ['rotate', 'redColor'],

透過 checkbox 來操作 Class 開關

1
2
<input type="checkbox" v-model="classArr" value="rotate">
<input type="checkbox" v-model="classArr" value="redColor">

一樣可以寫一些函式，透過操作陣列來動態新增 Class 樣式

1
2
3
4
5
methods: {
  addSomeNewClass() {
    this.classArr.push('radius')
  } 
}

Style 樣式

行內物件實體

1
<div class="box" :style="{ backgroundColor: 'red', outline: '1px solid blue' }"></div>
1
<div class="box" :style="[{ backgroundColor: 'red' }, { borderWidth: '5px' }]"></div>

將行內 Style 列表以物件型態宣告在 Vue data 內

1
<div class="box" :style="styleObject"></div>
1
<div class="box" :style="[styleObject, styleObject2]"></div>
1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
  el: '#app',
  data: {
    styleObject: {
      backgroundColor: 'red',
      borderWidth: '5px'
    },
    styleObject2: {
      width: '10 0px'
    }
  }

透過 JavaScript 操作物件來動態新增樣式

1
2
3
4
5
methods: {
  addSomeNewStyle() {
    this.styleObject.borderColor = 'green';
  } 
}

Codepen Demo

See the Pen 4-28 動態切換 ClassName 及 Style 多種方法 by Dylan (@Dylan_Liu) on CodePen.