iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
1
Modern Web

用範例理解 Vue.js系列 第 9

用範例理解 Vue.js #9:v-bind and Class Bindings

https://ithelp.ithome.com.tw/upload/images/20171219/20107107ITya4gbmAP.png

在 Vue 中,綁定樣式分為 Binding HTML Classes 或是 Binding Inline Styles。
通常為了分離 HTML 和 CSS,不會使用 Binding Inline Styles,所以這邊只介紹 Binding HTML Classes。

由於綁定 HTML Classes 會使用到 Vue Directives 的 v-bind,且 Vue.js 針對 v-bind 使用在 class 和 style 上有特別增加功能,就是說其表達式的結果可以為 String, Object, Array。

v-bind

先看個簡單的 v-bind 範例,可以綁定 img 的 src 為 imageSrc,當修改圖片路徑時,圖片會更新。
而 v-bind:src 可以簡寫為 :src。

附上 jsfiddle https://jsfiddle.net/hunterliu/zq1v3e2k/1/

<div id="app">
  <!-- bind an attribute -->
  <img v-bind:src="imageSrc">
  <!-- shorthand -->
  <img :src="imageSrc">
</div>
var vm = new Vue({
  el: '#app',
  data: {
    imageSrc: 'http://via.placeholder.com/350x150'
  }
})

vm.$data.imageSrc = 'http://via.placeholder.com/350x150/1'

Binding HTML Classes

Vue 可以透過傳入物件或陣列動態的切換 class。

Object Syntax

附上 fiddle https://jsfiddle.net/hunterliu/sne6f5zc/3/

Array Syntax

簡單改寫上面的範例

附上 fiddle https://jsfiddle.net/hunterliu/auyrptfv/

參考資料


上一篇
用範例理解 Vue.js #8:Watch vs Computed
下一篇
用範例理解 Vue.js #10:Conditional Rendering
系列文
用範例理解 Vue.js30

尚未有邦友留言

立即登入留言