Vue Class、Attribute and Style Bindings
Vue:2.5
Vue
提供了 v-bind
語法解決設定 DOM 的 Class
、Attribute
、Style
的問題。
基本使用
v-bind
用法是 v-bind:attribute
,也可以省略成 :attribute
。
範例
<div id="app">
<span v-bind:title="titleValue" :data-name="nameValue">
TEST
</span>
</div>
const vm = new Vue({
el: '#app',
data: {
nameValue: 'Johnson Lu',
titleValue: 'This is title'
}
});
生成出來的結果會變成:
<span title="This is title" data-name="Johnson Lu"></span>
Binding HTML Classes
HTML 的 class
通常會與 UI 操作有直接關係,所以會顯得複雜一些,但是一樣可以用 v-bind
解決。
想要根據資料來判斷是否顯示提示視窗就是個常見的案例。
Object Syntax
範例
<!-- attribute:boolean -->
<!-- 根據值的結果決定要不要加上特定的 class -->
<div id="app">
<span class="column" :class="{active: isActive, 'text-danger': hasError}">
TEST
</span>
</div>
const vm = new Vue({
el: '#app',
data: {
isActive: false,
hasError: true
}
});
生成出來的結果會變成:
<span class="column text-danger">
除了指定之外,也可以直接使用物件的方式操作。
<div id="app">
<span class="column" :class="classObj">
TEST
</span>
</div>
const vm = new Vue({
el: '#app',
data: {
classObj: {
active: false,
'text-danger': true
}
}
});
Array Syntax
範例
<div id="app">
<span class="column" :class="[active, 'text-danger']">
TEST
</span>
</div>
const vm = new Vue({
el: '#app',
data: {
active: false,
'text-danger': true
}
});
也可以透過 v-bind
做一些簡易判斷。
<div id="app">
<span class="column" :class="[active ? 'active' : 'disable', 'text-danger']">
TEST
</span>
</div>