class与style

绑定 class

在标签内使用 class 属性，给元素静态绑定class，也可以通过v-bind指令进行动态地绑定。

// 动静结合，vue会自动进行拼接
<div class="static" :class=" 'c1' ">{{msg}}</div>
// 真实dom：<div class="static c1">{{msg}}</div>

动态绑定，使用 :class="vue表达式" 。根据vue表达式的结果，解析类型名并拼接成真实dom的class。

字符串语法

字符串字面量会被渲染进真实dom。

• 适用于样式的名字不确定（个数确定），需要动态指定。

:class=" 'active' " // 纯静态
:class="classA" // classA 由vue所管理

对象语法

真值（自动转换）为true的，会渲染进真实dom。

• 适用于样式名字和个数都确定，但是要动态决定用或者不用。

:class="{ 类型名 : 真值, 'text-danger' : false}" // 纯静态
:class="classObj" // classObj 由 vue管理

数组语法

数组的所有元素（字符串）会被渲染进真实dom。

• 适用于绑定的样式名字不确定，并且个数也不确定。

:class="[ 'active' , 'text-danger' ]" // 纯静态
// 也可以由vue表达式返回字串数组
:class="classArray"

绑定 style

style绑定，也可以使用 v-bind 指令进行动态绑定，并且会自动添加前缀。

自动添加前缀：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

和 class 类似，style 也可以支持动态和静态，并且也以拼接的形式体现在真实dom上，每个css语句以 ; 结尾。

字符串语法

:style=" 'background-color: gray;' "
:style="myStyle" // myStyle 由vue管理

对象语法

对象的每对属性和属性值，都是css代码的封装，一句css代码，对应一对属性和属性值。（属性值注意是字串类型的）。

:style=" { backgroundColor: 'gray', color: '#451'} "
// style="backgroun-color:gray; color:#451;"
:style="styleObj" // styleObj 由vue管理

数组语法

:style="styleArray"

styleArray : [
    {backgroundColor: 'green'},
    {color : 'red'}
]