Vue.js 样式绑定

1.对象语法

(1)使用v-bind为class绑定一个对象，对象的key为样式名，key的值为布尔值。如果为true则添加这个类名，为false则移除这个类名。
这个方法适用class类名确定，但可能添加，也可能不添加的情形

.active{
    color:red;
}

<div id="app">
    <p :class="{active:isActive}">今天礼拜四</p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})

(2)添加多个类名:添加多个键值对即可
注意：添加多个类名时，key最好加上 引号 不然会报错

<p :class="{active:isActive,'text-center':isCenter}">今天礼拜四</p>

(3)v-bind:class接收一个对象，可以传递一个对象值给他，也可以用方法或者 计算属性返回一个对象给他都可以

computed:{
  classObject:function(){
       return {active:this.isActive,'text-center':this.isCenter}
  }
}

<p :class="classObject">今天礼拜四</p>

2.数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表
语法：v-bind:class="[]"
数组元素可以是class类名，也可以是vue定义的变量

//直接使用类名
<p :class="['active','text-center']">今天礼拜四</p>
//使用vue定义的变量
<p :class="[activeClass,centerClass]">今天礼拜四</p>

data:{
    activeClass:'active',
    centerClass:'text-center'
}

渲染结果：

<p class="active text-center">今天礼拜四</p>

3.绑定内联样式

其实就是使用v-bind给style属性绑定值.
(1)对象语法：适合给单个css属性赋值。
语法：v-bind:style="{css属性,属性值}"
(2)数组语法：适合给2个或2个以上的css属性赋值
语法：v-bind:style="[{css属性,属性值},{css属性,属性值}]"
注意：对象中的key不能有 - 这样的字符，text-align要写成textAlign

<!-- html语法 -->
<h1 style="color:red">html语法</h1>
<!-- 对象语法 css属性值为字符串-->
<h1 :style="{color:'green'}">对象语法</h1>
<!-- 对象语法 css属性值为vue定义的变量-->
<h1 :style="{color:myColor}">对象语法</h1>
<!-- 数组语法 -->
<h1 :style="[{color:'green'},{textAlign:'center'}]">数组语法</h1>

渲染结果：

<h1 style="color: red;">html语法</h1>
<h1 style="color: green;">对象语法</h1>
<h1 style="color: blue;">对象语法</h1>
<h1 style="color: green; text-align: center;">数组语法</h1>

4.子组件标签上的class类

如果组件本身已经有class类，而调用组件的时候又给他绑定了新的class类，那么他们不会覆盖，而是会叠加在一起

//父组件
<child :class="{box:flag}"></Child>

//子组件
<div :class="{child:flag}">
    <p>我是子组件</p>
</div>

渲染结果：
···

我是子组件1

···