vue中class与样式style绑定

这里记录vue中class与style的绑定，参考官方文档：
class与style绑定

class绑定

方法：
1、直接使用变量
2、对象
3、数组
4、数组和对象

1、直接使用变量

<!-- :class='变量' -->
<div :class="redColor">阿斯蒂芬1</div> 

2、对象

red和font32是字符串类名，会根据条件isTrue进行判断，返回为truthy真值

<!-- :class='对象' -->
<div :class="{red:isTrue,'font32':isTrue}">阿斯蒂芬4</div>

3、数组

数组里面的是两个变量

<!-- :class='数组' -->
<div :class="[fontSize,redColor]">阿斯蒂芬3</div>

3、三目运算

这样写时fontSize会一直存在，但是redColor会根据条件isTrue判断

<!-- :class='[三目运算]' 三目运算必需写在数组里面-->
<div :class="[isTrue?redColor:'',fontSize]">阿斯蒂芬2</div>

4、数组对象混用

像3那样，如果有多个class时就会繁琐，我们可以采取数组与对象混用
改写成，red是字符串class类名，fontSize是变量

<div :class="[{red:isTrue}，fontSize,">阿斯蒂芬5</div>

class用在组件上

当在一个自定义组件上使用class时，这些class将被添加到该组件的根元素上面，这个元素上已经存在的class不会被覆盖。
例如你声明了一个组件：

Vue.component(my-com,{
	template:"<div class="font32 red">hello </div>"
})

然后在使用它的时候添加一些样式：

<my-com class="foo baz"></my-com>

HTML将会被渲染为

<div class="font32 red foo baz" >hello </div>

对带数据绑定class一样适用

如果isTrue返回真truthy真值时，将会渲染为

<div class="font32 red active" >hello </div>

style样式绑定

1、对象语法

style样式的绑定v-bind:style的对象语法十分的直观，看着就和css样式一样，但其实是一个JavaScript对象，

<div :style="{color:'red','font-size':'32px'}">爱上了吉安</div>

也可以这样写
activeColor和fontSize是变量

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

或者是直接绑定到一个样式对象通常会更好，会让模板更清晰，如下

2、使用对象变量

<div v-bind:style="styleObject"></div>
//data中的styleObject
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }

3、数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素身上:
baseStyles和overridingStyles是两个样式对象

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

4、多重值

从 vue 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。