這篇文章帶給大家的內容是關於Vue中使用的幾種樣式的簡單介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

使用class樣式

1.數組

  
这是一个邪恶的H1

2.數組中使用三元表達式

  
这是一个邪恶的H1

3.數組中嵌套物件

  
这是一个邪恶的H1

4.直接使用物件

  
这是一个邪恶的H1

使用內聯樣式

#1.直接在元素上通過:style 的形式，書寫樣式物件

  
这是一个善良的H1

2 .將樣式對象，定義到data 中，並直接引用到:style 中

• #在data上定義樣式：

##

 data: {
      h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
 }

登入後複製

• 在元素中，透過屬性綁定的形式，將樣式物件應用到元素中：

 
这是一个善良的H1

登入後複製

• 在data上定義樣式：

#

  data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
  }

登入後複製

• 在元素中，透過屬性綁定的形式，將樣式物件套用到元素中：

 
这是一个善良的H1

登入後複製
相關推薦：

VUE元件的實例：VUE元件如何實現倒數計時？

Node.js中執行緒與進程的詳細分析

以上是Vue中使用的幾種樣式的簡單介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！