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

來源：懂視網責編：小采時間：2020-11-27 19:32:36

Vue中使用的幾種樣式的簡單介紹（附代碼）:本篇文章給大家帶來的內容是關于Vue中使用的幾種樣式的簡單介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。使用class樣式1.數組 <h1 :class="['red', 'thin']">這

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue中使用的幾種樣式的簡單介紹（附代碼）:本篇文章給大家帶來的內容是關于Vue中使用的幾種樣式的簡單介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。使用class樣式1.數組 <h1 :class="['red', 'thin']">這

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

1.數組

 <h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>

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

 <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>

3.數組中嵌套對象

 <h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>

4.直接使用對象

 <h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

1.直接在元素上通過 :style 的形式，書寫樣式對象

 <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 代碼樣式