前端學習筆記

Vue Class and Style Bindings

class 與 style 皆是屬性，在 HTML 屬性裡帶入資料，用的是 v-bind 語法。
通常來說 v-bind 的屬性值為字串，為了操作的方便，Vue 另外增強了 class 與 style 綁定的功能。

Class

物件語法

傳給 v-bind:class 一個物件，動態切換 class

1
2
3
4
5
6
7
8
9
10
<div id="app">
  <div class="sth" v-bind:class="{ 'text-danger': hasError }">一些警告</div>
</div>

var vm = new Vue({
  el: '#app'
    data: {
      hasError: true
    }
})

HTML 會渲染成： 

1
<div class="sth text-danger">一些警告</div>

視圖顯示：一些警告

如果 vm.hasError = false

則：一些警告

也可以這樣寫：

1
2
3
4
5
6
7
8
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    'text-danger': true,
    'text-primary': false
  }
}

或是使用計算屬性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div v-bind:class="classObject"></div>

data: {
  'text-danger': true,
  'text-primary': false
},
computed: {
  classObject: function () {
    return {
      'text-danger': // 表達式,
      'text-primary': // 表達式
    }
  }
}

陣列語法

傳給 v-bind:class 一個陣列，帶入多個 class

1
2
3
4
5
6
<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

HTML 會渲染成： 

1
<div class="active text-danger"></div>

若是想根據真值假值切換列表內的 class，可以使用三元運算

1
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

或是直接用物件語法

1
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

元件

在自定義元件上使用屬性 class 時，所使用的 class 將被添加到元件根元素上，原本位於根元素上的 class 不會被覆蓋。

1
2
3
Vue.component('my-component', {
  template: '<p class="classA classB">Hi</p>'
})

添加 class

1
<my-component class="classC classD"></my-component>

HTML 會渲染成： 

1
<p class="classA classB classC classD">Hi</p>

用物件語法也行

1
<my-component v-bind:class="{ active: isActive }"></my-component>

若 isActive 為真值，則

1
<p class="classA classB active">Hi</p>

Style

物件語法

css 屬姓名可用 駝峰式(camelCase) 或 橫線(kebab-case) 來命名，橫線記得包在引號內。

1
2
3
4
5
6
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

下面寫法更優

1
2
3
4
5
6
7
8
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

又或是搭配返回物件的計算屬性使用。

陣列語法

帶入多個 style 物件。

1
2
3
4
5
6
7
8
9
10
<div v-bind:style="[colorStyle, sizeStyle]">紅30</div>

data: {
  colorStyle: {
    color: 'red'
  },
  sizeStyle: {
    'font-size': '30px'
  }
}

視圖顯示：
紅30

# Vue, w3HexSchool
Vue Computed Properties
Vue Template_Syntax - basic
追蹤

目錄

最新文章

分類

標籤

JavaScript 1
Vue 11
w3HexSchool 11

最新文章

分類

標籤

JavaScript 1
Vue 11
w3HexSchool 11
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×