理解
v-bind几乎可以绑定所有的属性，但是很常用的一种就是动态绑定class类style样式。
动态绑定class
v-bind动态绑定class有三种语法：字符串语法、数组语法、对象语法，注意动态class和静态class不要一起使用，虽然可以，但是会出现‘一闪而过’的效果，因为静态样式渲染比动态样式更快:
不推荐，动态class和静态class一起使用了：
<h2 :class="`box f1`" class="c1"> </h2> 这里的box f1 c1 都是已经定义好的类名
字符串语法：
在使用字符串语法动态绑定class时，推荐使用模板字符串，因为使用模板字符串可以直接使用已经定义好的类名，如果使用的是普通字符串，这个时候写的类名会被当作响应式变量。
<h2 :class="`box f1`">动态的class样式（字符串拼接语法）</h2>
这里的box f1 都不是响应式变量，是已经定义的类名，因为这里使用了模板字符串
对象语法：
对象语法只需要注意一点：对象属性名是类名，对象属性值是布尔值
<h2 :class="{[c1]:true,[f1]:true}">动态的class样式（对象语法）</h2>
这里的c1 f1都是响应式变量，它们的值都是style标签里面已经定义好的类名
<h2 :class="{'c2':true,'f3':true}">动态的class样式（对象语法）</h2>
这里的c2 f3都是类名，而不是响应式变量
抓住本质： 对象语法属性名是类名，属性值是布尔值
数组语法：
数组语法同样只抓住一点：数组中每个元素的值都是一个表达式，这个表达式的返回值必须是一个已经定义好的类名
<h2 :class='[c1,f1,"f3"]'>动态的class样式（数组语法）</h2>
这里c1 f1 是响应式变量，但是它们的值，都是style里面定义好的类名，
而f3是style里面定义好的类名.
抓住一点，每个元素都是一个表达式，每个表达式都必须返回一个已经定义好的类名.
动态绑定style：
字符串语法：(不常用)
<h2 :style="`color:red;fontSize:80px`">动态绑定style字符串语法</h2>
//建议使用模板字符串
对象语法：
记住一点：对象语法中：属性名都是css样式名，属性值都是css样式值
<h2 :style="{'color':cl,'fontSize':fs}">动态绑定style对象语法</h2>
c1 fs 都是data中的声明式变量
数组语法：
记住一点: 数组语法中每个元素都是一个对象语法
<h2 :style="[{color:'red'},{fontSize:fs}]">动态绑定style数组语法</h2>
数组语法中数组的每个元素都是一个对象语法
里面的属性名可以加引号也可以不加，属性值不加引号会被当作变量，
fs就是一个响应式变量。
总结
每种用法都很灵活，记住每种用法的本质。就能灵活变通
