Vue中使用的幾種樣式的簡單介紹（附程式碼）

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

使用class樣式

1.數組

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;]">这是一个邪恶的H1</h1>

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

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;, isactive?&#39;active&#39;:&#39;&#39;]">这是一个邪恶的H1</h1>

3.數組中嵌套物件

  <h1 :class="[&#39;red&#39;, &#39;thin&#39;, {&#39;active&#39;: isactive}]">这是一个邪恶的H1</h1>

4.直接使用物件

  <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用內聯樣式

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

  <h1 :style="{color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;}">这是一个善良的H1</h1>

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

• #在data上定義樣式：

##

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

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

 <h1 :style="h1StyleObj">这是一个善良的H1</h1>

3.在:style 中透過數組，引用多個data 上的樣式物件

• 在data上定義樣式：

#

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

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

 <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

相關推薦：

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

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

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