Vue-101-Day 7

data binding 的常見的需求是操作 element 的 class 或是 inline-style，class 與 style 皆為 attribute， 都可以使用 v-bind 進行綁定。

v-bind 用於 class 及 style 的時候，回傳的類型可以使用 object 及 array 代替

 範例說明

index.html 的 head，引入 bootstrap 的 cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

Object syntax

在分頁標籤(navs)，預設第一個 Active Tab class 為 active

註：class 與 v-bind:class 是可以同時間存在的

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a class="nav-link" :class="{active: isActive}" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

var vm3 = new Vue({
  el: '#app-6',
  data: {
    isActive: true
  }
})

3 秒後將預設值 isActive 設為 false，Active Tab 的 active class 則會消失

setTimeout(() => {
  vm3.isActive = false
}, 3000)

設置多個 class

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a
        class="nav-link"
        :class="{active: isActive, 'text-danger': hasError}"
        href="#"
        >Active</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

假如需要設置的 class 數量太多，程式碼變得落落長，畫面也變得很雜亂，所以可以直接綁定一個 object

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a class="nav-link" :class="classObject" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

var vm3 = new Vue({
  el: '#app-6',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})

Array Syntax

除了 Object，也可以用 Array 進行綁定

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a class="nav-link" :class="[activeClass, errorClass]" href="#"
        >Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

var vm3 = new Vue({
  el: '#app-6',
  data: {
    isActive: false,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})

使用三元運算子

可以根據條件切換所要指定的 class

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a
        class="nav-link"
        :class="[activeClass, isError ? errorClass: '']"
        href="#"
        >Active</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

var vm3 = new Vue({
  el: '#app-6',
  data: {
    isError: false,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})

假如有太多條件需要判斷，程式碼也會變得很雜，可以在 Array 裡面置放 Object

<div id="app-6">
  <ul class="nav nav-tabs">
    <li>
      <a
        class="nav-link"
        :class="[{active: isActive, 'text-danger': isError}]"
        href="#"
        >Active</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#1">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#2">Link</a>
    </li>
  </ul>
</div>

var vm3 = new Vue({
  el: '#app-6',
  data: {
    isError: false,
    isActive: false,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})

Binding Inline Styles

inline-style 也可以使用 object syntax 及 array syntax

Object syntax

<div id="app-7" :style="{color: activeColor, fontSize: fontSize + 'px'}">
  Hi!!!
</div>

var vm4 = new Vue({
  el: '#app-7',
  data: {
    activeColor: 'blue',
    fontSize: 30
  }
})

當然也可以寫在一個 object 裡面，程式碼就不會太長

<div id="app-7" :style="styleObject">
  Hi!!!
</div>

var vm4 = new Vue({
  el: '#app-7',
  data: {
    styleObject: {
      color: 'blue',
      fontSize: '30px'
    }
  }
})

Array syntax

使用 Array 綁定 inline-style

<div id="app-7" :style="[colorStyle, fontStyle]">
  Hi!!!
</div>

var vm4 = new Vue({
  el: '#app-7',
  data: {
    colorStyle: { color: 'blue' },
    fontStyle: { fontSize: '30px' }
  }
})

Multiple value

版本 2.3 以上，可以針對 style property 給定 multiple value，範例如下

<div id="app-7" :style="{display: ['-ms-flexbox', 'flex']}">
  Hi!!!
</div>

會渲染符合瀏覽器支援的最後一個值，以這個範例來說為：display: flex

參考資料：

• Class and Style Bindings