一、使用class樣式：

         CSS部分：　 

 1     <style>
 2         .green{
 3             color:green;
 4         }
 5 
 6         .italic{
 7             font-style:italic;
 8         }
 9 
10         .thin{
11             font-weight:200;
12         }
13 
14         .active
 
{
15             /* 字元間距 */
16             letter-spacing: 0.5em;
17         }
18 
19     </style>

　　JS部分：

1     var app = new Vue({
2             el: "#app",
3             data() {
4                 return {
5                     flag:true,
6                     styleObj:{green:true,thin:true
 
}
7                 }
8             }
9         });

1. 陣列　　

<h1 :class=['thin','italic']>這是一個H1標籤的內容</h1>

　　2.陣列中的三元表示式

<h1 :class=['thin','italic',flag?'active':'']>這是一個H1標籤的內容</h1>

　　3.陣列中巢狀物件

<h1 :class=['thin','italic',{'active':flag}]>這是一個H1標籤的內容</
 
h1>

　　4.直接使用物件

<h1 :class="{green:true,thin:true}">這是一個H1標籤的內容</h1>

　　5.直接引用物件

<h1 :class="styleObj">這是一個H1標籤的內容</h1>

二、使用內聯樣式

　　JS部分：

 1     var app = new Vue({
 2             el: "#app",
 3             data() {
 4                 return {
 5                     flag:true,
 6                     styleObj:{green:true,thin:true},
 7                     cssObj:{color:'red','font-weight':200},
 8                     cssObj1:{'font-style':'italic'},
 9                 }
10             }
11         });

　　1、直接使用CSS物件

1 <h1 :style="{color:'red','font-weight':200}">這是一個H1標籤的內容</h1>

　　2、使用js物件

1 <h1 :style="cssObj">這是一個H1標籤的內容</h1>

　　3、使用多個樣式

<h1 :style=[cssObj,cssObj1]>這是一個H1標籤的內容</h1>