Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定

屬性綁定v-bind、Class 與 Style 綁定。

v-bind 屬性綁定

綁在 HTML 上的屬性 (attribute) 若希望能與 vue instance 結合,就要加上 v-bind:some_attribute (簡寫 :some_attribute)。

如下所示,在 <a> 上的屬性 title,若希望能帶入資料 hint,就要使用 :title="hint"

Vue.js: v-bind 屬性綁定

Vue.js: Class 與 Style 綁定 - Modifiers .prop

<div id="app">
  <a href="#" :title="hint" :data="hint">${ text }</a>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    text: '把滑鼠移過來看看!',
    hint: '我是標題!'
  }
});

// 由於部落格會把雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。

Modifiers 修飾符

v-bind 常用的修飾符有兩個:

.prop

將綁定的屬性設定為 DOM property 而非 attribute。

如果沒有設定修飾符 .prop,綁在 DOM 上面的是 attribute。例如:如上例,<a> 綁了一個 attribute「data」,因為 data 是 attribute,所以可以使用 getAttribute 取值。

var element = document.getElementsByTagName('a')[0];
element.getAttribute('data'); //我是標題!

但無法利用取 property 的方式取值,拿到的是undefined :(

element.data; //undefined

若希望只是存資料待之後運算,並且不希望過份汙染 HTML,通常會設為 property-利用 .prop 改將綁定的屬性設定為 DOM property。

<div id="app">
  <a href="#" :title="hint" :data.prop="hint">${ text }</a>
</div>

data 設為 property,在 HTML 上是看不到的。

Vue.js: Class 與 Style 綁定 - Modifiers .prop

這樣就可以使用取 property 的方式取值,拿到「我是標題!」。

var element = document.getElementsByTagName('a')[0];
element.getAttribute('data'); //null
element.data; //我是標題!

備註:attribute 與 property 的差異

.camel

若使用 .camel,就會將帶有「-」分隔 (kebab-case) 的屬性名稱轉為小駝峰 (camelCase)。

Vue.js: Class 與 Style 綁定 - Modifiers .camel

<div id="svg">
  <svg :view-box.camel="id"></svg>
</div>

並非任意屬性都可適用,像是 data 就不適用,所以一開始練習時覺得很奇怪,官網是這樣寫的,但我怎麼試都是轉為全部小寫 XD

Vue.js: Class 與 Style 綁定 - Modifiers .camel

<div id="app">
  <a href="#" :title="hint" :data-abc-def.camel="123456789">${ text }</a>
</div>

Class 與 Style 綁定

Class 設定

如下圖,若我們想要將選定的選項連結設為粉紅色,其他連結設為紫色,通常會將指定項目給定一個 class「active」。

Vue.js: Class 與 Style 綁定

<ul>
  <li><a class="active" href="#">選項 1</a></li>
  <li><a href="#">選項 2</a></li>
  <li><a href="#">選項 3</a></li>
</ul>

再假設,選項 1 不總是被選定的,而是依賴一個參數「isActive」決定-若 isActive 值為 true 才會被選定而為粉紅色,改寫上例如下。

<div id="app">
  <ul>
    <li><a :class="{ active: isActive }" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isActive: true
  }
});

設定 isActive 值為 false,選項 1 的 active class 消失。

vm.isActive = false;

綁定多個 class

可以綁定多個 class 並判斷是否顯示。如下,使用 isActive 和 isError 分別決定 active 和 hasError 這兩個 class 是否顯示。

Vue.js: Class 與 Style 綁定,綁定多個 class

<div id="app">
  <ul>
    <li><a :class="{ active: isActive, hasError: isError }" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isActive: true,
    isError: true
  }
});

要綁定的 class 太多了,寫在畫面上很雜亂,那就通通集合起來統一由一個物件或陣列管理。

物件

承上,可改寫為

<div id="app">
  <ul>
    <li><a :class="classList" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    classList: {
      active: true,
      hasError: true
    }
  }
});

或使用 computed 自動計算

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isActive: true,
    isError: true
  },
  computed: {
    classList: function() {
      return {
        active: this.isActive,
        hasError: this.isError
      }
    }
  }
});

陣列

也可以用陣列的方式管理。

<div id="app">
  <ul>
    <li><a :class="[activeClass, errorClass]" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    activeClass: 'active',
    errorClass: 'hasError'
  }
});

加上判斷條件。

<div id="app">
  <ul>
    <li><a :class="[isActive ? activeClass : '', errorClass]" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'hasError'
  }
});

<div id="app">
  <ul>
    <li><a :class="[ { active: isActive }, errorClass]" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isActive: true,
    errorClass: 'hasError'
  }
});

inline-style 的使用

Vue.js: inline-style

<div id="app">
  <ul>
    <li><a :style="{ color: activeColor, fontSize: fontSize + 'px' }" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    activeColor: '#F25E7A',
    fontSize: '15'
  }
});

要綁定的樣式太多,通通集合起來統一由一個物件管理。

<div id="app">
  <ul>
    <li><a :style="styleList" href="#">選項 1</a></li>
    <li><a href="#">選項 2</a></li>
    <li><a href="#">選項 3</a></li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    styleList: {
      color: '#F25E7A',
      fontSize: '15px'
    }
  }
});

以上參考 v-bindClass and Style Bindings


vue.js vue.js directives