實際開發中經常會遇到動態操作元素樣式的需求。因此，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時