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

1. 动态绑定 HTML 的 class

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

<h3 class="thin" :class="isItalic?'italic'： ">MyDeep组件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>

data() {
  return { isItalic: true }
}

.thin{ // 字体变细
  font-weight:200;
}
.italic{ // 倾斜字体
  font-style: italic;
}

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

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

<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
  MyDeep 组件
</h3>

<button @click="isItalic=!isItalic">Toggle Italic</button>
<button @click="isDelete=!isDelete">Toggle Delete</button>

data(){
  return {
    isItalic: true,
    isDelete: false,
  }
}

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

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

<h3 class="thin" :class="class0bj">MyDeep 组件</h3>
<button @click="class0bj.italic=!class0bj.italic">Toggle Italic</button>
<button @click="class0bj.delete=!class0bj.delete">Toggle Delete</button>

data(){
  return {
    classobj：{ //对象中，属性名是class 类名，值是布尔值
      italic: true,
      delete: false,
    }
   }
}

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

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

天应UED的要求对项目的滚动条进行美化，原生的滚动条虽然很实用，但确实不美观。

用了一些css美化后

::-webkit-scrollbar{
    height: 9px;
    width: 9px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(157, 165, 183, 0.4);
}

好看多了

但是我们发现了一个问题，就是在滚动条变细之后导致我们想要用鼠标拖动滚动条时有时有些困难。

无意中发现滚动条实际上是由边框和背景色共同组成

于是我们就有了思路，将滚动条的border设置成透明的，只有鼠标hover时才将滚动条的border背景色设置出来

在网上搜索解决方案，无意间发现这篇文章 滚动条悬浮改变颜色大小 里面提到

又很偶然的发现background-clip: padding-box，设置该属性后背景延伸至内边距（padding）外沿，不会绘制到边框处，也就是说设置该属性后，背景将被限制在内容和边距之内，边框背景不会改变。

我们参考进行了下面的改动

完整代码

::-webkit-scrollbar{
    height: 9px;
    width: 9px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-style: dashed;
    border-color: transparent;
    border-width: 2px;
    background-color: rgba(157, 165, 183, 0.4);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 165, 183, 0.7);
} 

效果如下

鼠标未hover时

鼠标hover时