Vue.js (7) - HTML 的 Class 與 Style 屬性綁定

Vue.js

在 HTML 元素中有 class 及 style 屬性，我們可以透過它們來指定 CSS 中的樣式，或直接寫在元素中。由於它們是屬性，所以當然可以透過 v-bind 指令來綁定它們的值，而 Vue.js 對這兩個屬性提供了增強功能，表達式除了可是是字串外，還可以是陣列或物件。

綁定 HTML Class 屬性

使用物件語法

使用範例：

HTML<style>
.bg {
  background-color: #77ccff;
}
</style>

<div id="vm">
  <div :class="{ bg: isShowBg }">
    動態顯示背景色
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    isShowBg: true
  }
})

setInterval(function(){
  vm.isShowBg = !vm.isShowBg
}, 1000)
</script>

瀏覽器會在 isShowBg 為 true 時，看到 <div class="bg">；在 false 時看到 <div class="">。

v-bind:class 可以和原本的 class 共存，所以可以寫成：

HTML<style>
.bg {
  background-color: #77ccff;
}

.fg {
  color: #661199;
}
</style>

<div id="vm">
  <div class="fg" :class="{ bg: isShowBg }">
    動態顯示背景色
  </div>
</div>

瀏覽器會在 isShowBg 為 true 時，看到 <div class="fg bg">；在 false 時看到 <div class="fg">。

如果你的樣式太多，放在表達式中可能不太好看，可以將它綁定到資料中：

HTML<div id="vm">
  <div :class="colorClass">
    動態顯示顏色
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    colorClass: {
      fg: true,
      bg: true
    }
  }
})

setInterval(function(){
  vm.colorClass.bg = !vm.colorClass.bg
  vm.colorClass.fg = vm.colorClass.bg
}, 1000)
</script>

你也可以使用計算屬性來運算最終要顯示的結果。

使用陣列語法

相同的功能，我們也可以用陣列語法：

HTML<div id="vm">
  <div :class="[bgClass, fgClass]">
    陣列語法
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    bgClass: 'bg',
    fgClass: 'fg'
  }
})
</script>

你可以在陣列中混合物件來達到依條件顯示的功能：

HTML<div id="vm">
  <div :class="[{ bg: isShowBg }, fgClass]">
    陣列中混合物件來達到依條件顯示
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    isShowBg: true,
    fgClass: 'fg'
  }
})
</script>

綁定 HTML Style 屬性

使用物件語法

使用範例：

HTML<div id="vm">
  <div :style="{ color: fg, fontSize: fontSize + 'em' }">
    綁定 HTML Style 屬性
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    fg: '#77ccff',
    fontSize: 2
  }
})
</script>

當然也可以把它移到資料中：

HTML<div id="vm">
  <div :style="fgStyle">
    動態顯示背景色
  </div>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    fgStyle: { 
      color: '#77ccff',
      fontSize: '3em' 
    }
  }
})
</script>

一樣可以用計算屬性實現。陣列語法也和 v-bind:class 中介紹的使用方式一樣。

如果你需要使用 CSS 動畫效果來做到元素的過場動畫，Vue.js 也有提供這個功能，之後會說。

本文網址：http://blog.tonycube.com/2017/04/vuejs-7-html-class-style.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀