Vue——如何在Vue中使用樣式


使用class樣式

1.數組

第一種使用方式,直接傳遞一個數組,注意:這里的class需要使用 v-bind做數據綁定

 

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

 

false

 

 

 

true

 

 

 

3.數組中嵌套對象

false

 

true

 

4.直接使用對象(不用數組包裹)

false

 

 

true

 

 

既然是一個對象,那我們也可以直接在data身上寫進行保存

 

 

內聯樣式

 

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

 

 

2.將樣式對象,定義到 data 中, 並直接引用到v-bind:style中

  2.1在data上定義的樣式

 

 

  2.2在元素中,通過屬性綁定的形式,將樣式對象應用到元素中

 

 

3.在v-bind:style中通過數組,引用多個data上樣式對象

  3.1在data上定義的樣式

 

 

 

  3.2在元素中,通過屬性綁定的形式,將樣式對象應用到元素中


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM