在实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。

1. 动态绑定 HTML 的 class

可以通过三元表达式，动态的为元素绑定 class 的类名。示例代码如下：

MyDeep组件Toggle Italicdata() {  return { isItalic: true }}.thin{ // 字体变细  font-weight:200;}.italic{ // 倾斜字体  font-style: italic;}

2. 以数组语法绑定 HTML 的 class

如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式：

  MyDeep 组件Toggle ItalicToggle Deletedata(){  return {    isItalic: true,    isDelete: false,  }}

3. 以对象语法绑定 HTML 的 class

使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化：

MyDeep 组件Toggle ItalicToggle Deletedata(){  return {    classobj：{ //对象中，属性名是class 类名，值是布尔值      italic: true,      delete: false,    }   }}

4. 以对象语法绑定内联的 style

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

黑马程序员