动态控制 class 类名
静态样式直接编写即可：<div class="box" style="margin: 20px auto;"><br>
在项目中基于业务需求动态控制元素样式的时候，需要一些特殊的处理
对象方式处理
1、直接写在结构上
语法
:class="{样式类名:响应式数据,...}"
响应式数据为TRUE则有这个样式类，反之则没有
例
<b><font color="#c41230">结果渲染为：<div class="static active"></div></font></b><br>
注意
v-bind:class 指令也可以与普通的 class 共存。如上
2、写在响应数据中
例
<b><font color="#c41230">渲染的结果为：<div class="active"></div></font></b><br>
3、写在计算属性中
语法
:class="返回值是对象的计算属性"<br>
这里绑定一个返回对象的计算属性
数组控制样式类<br>
语法
:class="[响应式数据1,....]"
控制响应式数据的值是对应的样式类或者没有值，来控制是否有这个样式
例
渲染为：<div class="active text-danger"></div>
注意
1、
如果想根据条件切换列表中的 class，可以用三元表达式：
较繁琐
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
2、
在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
动态控制 style 样式
与动态控制 class 类名基本一致
注意
可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名
