Vue之v-bind类名与样式绑定

课程大纲
（1）v-bind回顾
（2）class-对象语法
（3）class-数组语法
（4）内联式style-对象语法
（5）内联式style-计算属性语法
前言
之前v-bind基本用法及语法糖，主要用于动态更新HTML元素属性。
v-bind回顾
v-bind动态属性：常用于动态绑定HTML元素的属性，例如id,href,src等属性

1.单个语法格式 v-bind：attributeName=variable

2.对象语法格式
v-bind=“{attributeName1：variable1，attributeName2：variable2，…}”

3.数组语法格式“绑定类名”
v-bind：attributeName=“[variable1,variable2,…]”

class-对象语法-单类名切换
给v-bind:class设置一个对象，可以动态切换class。
语法：v-bind：class一个对象，一动态地切换class：

isActive为true时，结果为

isActive为false时,结果为

class-对象语法-多类名切换
在对象中可以传入多个属性动态切换多个class。

class-对象语法-类名共存
v-bind:class指令也可以与普通的class属性共存。

class-对象语法-对象包裹
绑定数据对象不必都定义在模板里，也可以用一个大对象包裹

对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。

class-对象语法-计算属性
当：class的表达式过长或者逻辑复杂时，可以绑定计算属性

class-数组语法-普通数组
当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表。

class-数组语法-表达式1
可以使用三元运算符来根据条件切换class

class-数组语法-表达式2
例如：

颜

class-数组语法-数组对象嵌套

当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法。

class-数组语法-计算属性
与对象语法一样，当：class的表达式过长或者逻辑复杂时，可以绑定计算属性computed

内联样式style-对象语法
v-bind：style的对象语法十分直观，看着非常像CSS，但其实是一个计算对象。

内联样式style-对象包裹语法
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，以data为例，

这样会让模板更加清晰。
内联样式style-计算属性语法
也可以计算属性用法绑定