Vue入门 - Class 与 Style 绑定

1 绑定class

1.1 对象语法

<div class="static" :class="{ active: isActive }"></div>

1. 可将对象绑定在class属性上，动态切换class
   
   • 若isActive为true，则class插入active
   • 若isActive为false，则class移除active
2. v-bind:class与普通class可共存。
3. 可绑定data中的对象，或计算属性。

1.2 数组语法

<div class="[activeClass, errorClass]"></div>

//...
data(){
    return{
        activeClass:'active',
        errorClass:'error'
    }
} 

在数组中嵌套表达式：

<div class="[activeClass?"active":"", errorClass]"></div>

在数组中嵌套对象：

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

1.3 用在组件上

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

//children
<p class="foo bar">hi<p>

//渲染后结果
<p class="foo bar boo baz">hi<p>

1. 给组件赋值的class会与组件内根节点的class合并。

---

2 绑定style

2.1 对象语法

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

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

1. 与class一样，也是将对象通过v-bind绑定到元素的style属性上。

2.2 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"

data{
    baseStyles:{},
    overridingStyles:{}
}

1. 数组语法可将多个对象绑定到style属性。

---

3 自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。