Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定
21 Apr 2017屬性綁定v-bind
、Class 與 Style 綁定。
v-bind
屬性綁定
綁在 HTML 上的屬性 (attribute) 若希望能與 vue instance 結合,就要加上 v-bind:some_attribute
(簡寫 :some_attribute
)。
如下所示,在 <a>
上的屬性 title,若希望能帶入資料 hint,就要使用 :title="hint"
。
<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。.camel
:將帶有「-」分隔 (kebab-case) 的屬性名稱轉為小駝峰 (camelCase)。
.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 上是看不到的。
這樣就可以使用取 property 的方式取值,拿到「我是標題!」。
var element = document.getElementsByTagName('a')[0];
element.getAttribute('data'); //null
element.data; //我是標題!
.camel
若使用 .camel
,就會將帶有「-」分隔 (kebab-case) 的屬性名稱轉為小駝峰 (camelCase)。
<div id="svg">
<svg :view-box.camel="id"></svg>
</div>
並非任意屬性都可適用,像是 data
就不適用,所以一開始練習時覺得很奇怪,官網是這樣寫的,但我怎麼試都是轉為全部小寫 XD
<div id="app">
<a href="#" :title="hint" :data-abc-def.camel="123456789">${ text }</a>
</div>
Class 與 Style 綁定
Class 設定
如下圖,若我們想要將選定的選項連結設為粉紅色,其他連結設為紫色,通常會將指定項目給定一個 class「active」。
<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 是否顯示。
<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 的使用
<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-bind 和 Class and Style Bindings。