一、用 變量形式 綁定單個 Class 名
在 vue 中綁定單個 class 名還好說，直接寫就可以了
<template> <div id="app"> <!-- 因為是自定義屬性，所以要用到 v-bind ，簡寫為 : --> <!-- 3.將 box 綁定給 div --> <div :class="box"></div> </div> </template> <script> export default { name: 'app', data () { return { // 2.在 data 中把 yellow 賦給 box box: 'yellow' } } } </script> <style> /* 1.在樣式表中寫好樣式 */ .yellow{ width: 200px; height: 200px; background: #ff0; } </style> 
用 Vue 綁定單個Class 名
二、用 數組形式 綁定多個 Class 名
比如我們想再給這個 div 加個陰影
在 style 中寫好樣式
.shadow{ box-shadow: 10px 10px 5px 0 #999; } 在 data 中繼續添加數據對象
<script> export default { name: 'app', data () { return { box: 'yellow', shadow:'shadow' } } } </script> 在標簽中以數組的形式綁定 Class 名
<template> <div id="app"> <div :class="[box,shadow]"></div> </div> </template> 就 OK 了。
用 數組形式 綁定多個 Class 名
三、用 json 形式 綁定多個 Class 名
該方法方便用於當同時添加多個 Class 名時，在某種情況下判斷顯示哪種樣式
先寫好樣式
<style> .yellow{ width: 200px; height: 200px; background: #ff0; } .shadow{ box-shadow: 10px 10px 5px 0 #999; } </style> 在 data 中添加數字對象，用來做判斷
<script> export default { name: 'app', data () { return { show1:true, show2:false } } } </script> 以 json 的形式綁定到 class 中，通過布爾值改變 show1 與 show2 的值，來控制 div 的狀態
<template> <div id="app"> <div :class="{yellow:show1,shadow:show2}"></div> </div> </template> 
用 json 形式 綁定多個 Class