vue Class 与 Style 绑定

1. Class 绑定

1.1 对象语法

普通对象  单个类

<div v-bind:class="{ active: isActive }"></div>

普通对象  多个类

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

data: { isActive: true, hasError: false }

数据对象 普通数据

<div v-bind:class="classObject"></div>

data: { classObject: { active: true, 'text-danger': false } }

数据对象 计算属性

data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

1.2 数组语法

普通数组

<div v-bind:class="[activeClass, errorClass]"></div>

data: { activeClass: 'active', errorClass: 'text-danger' }

带三元运算

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

带对象

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

1.3 组件用法        当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

 Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })

通常用法

<my-component class="baz boo"></my-component>

带数据绑定

<my-component v-bind:class="{ active: isActive }"></my-component>

2. Style 绑定

2.1 对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

2.2 数据对象

<div v-bind:style="styleObject"></div>

data: { styleObject: { color: 'red', fontSize: '13px' } }

....

3. 相关链接