v-bind 几乎可以绑定所有的属性，但是很常用的一种就是动态绑定 class 类 style 样式。

官方文档：Class 与 Style 绑定 — Vue.js (vuejs.org) (opens new window)

动态绑定 class

v-bind 动态绑定 class 有三种语法：字符串语法、数组语法、对象语法。

注意

动态 class 和静态 class 不要一起使用，虽然可以，但是会出现‘一闪而过’的效果，因为静态样式渲染比动态样式更快

字符串语法

• 表达式是字符串: 'classA'

适用于：类名不确定，要动态获取

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

对象语法

• 表达式是对象: {classA:isA, classB: isB}

对象语法只需要注意一点：对象属性名是类名，对象属性值是布尔值。

适用于：要绑定多个样式，个数不确定，名字也不确定

<h2 :class="{[c1]:true,[f1]:true}">动态的class样式（对象语法）</h2>
// 这里的c1 f1都是响应式变量，它们的值都是style标签里面已经定义好的类名

<h2 :class="{'c2':true,'f3':true}">动态的class样式（对象语法）</h2>
// 这里的c2 f3都是类名，而不是响应式变量
// 抓住本质： 对象语法属性名是类名，属性值是布尔值

数组语法

• 表达式是数组: ['classA', 'classB']

数组语法同样只抓住一点：数组中每个元素的值都是一个表达式，这个表达式的返回值必须是一个已经定义好的类名。

适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

<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就是一个响应式变量。

总结

每种用法都很灵活，记住每种用法的本质。就能灵活变通