Facebook加入
LINE加入
2021/12/25
Vue Class、Attribute and Style Bindings
Vue：2.5
Vue 提供了 v-bind 語法解決設定 DOM 的 Class、Attribute、Style 的問題。
基本使用
v-bind 用法是 v-bind:attribute，也可以省略成 :attribute。
範例
TEST
const vm = new Vue({
el: '#app',
data: {
nameValue: 'Johnson Lu',
titleValue: 'This is title'
}
});
生成出來的結果會變成：
Binding HTML Classes
HTML 的 class 通常會與 UI 操作有直接關係，所以會顯得複雜一些，但是一樣可以用 v-bind 解決。
想要根據資料來判斷是否顯示提示視窗就是個常見的案例。
Object Syntax
範例
TEST
const vm = new Vue({
el: '#app',
data: {
isActive: false,
hasError: true
}
});
生成出來的結果會變成：
除了指定之外，也可以直接使用物件的方式操作。
TEST
const vm = new Vue({
el: '#app',
data: {
classObj: {
active: false,
'text-danger': true
}
}
});
Array Syntax
範例
TEST
const vm = new Vue({
el: '#app',
data: {
active: false,
'text-danger': true
}
});
也可以透過 v-bind 做一些簡易判斷。
TEST
Categories: Vue
Tags: javascriptVue
熱門推薦
留言回覆
