vue的 :class 與 :style 的講解


Vue樣式:

  Vue中通過屬性綁定為元素的class樣式

    

    第一種使用方式:直接傳遞一個數組

      注意:這里的class需要使用v-bind做數據綁定

        

         

    第二種使用方式:在數組中使用三元表達式

       

       

    第三種使用方式:在數組中使用對象,來代替三元表達式,提高代碼的可讀性

       

       

    第四種使用方式:在為class使用v-bind綁定對象的時候,對象的屬性是類名,屬性值是一個修飾符

       

        

   Vue中通過屬性綁定為元素綁定style行內樣式

    第一種方式:直接在元素上通過:style的形式,書寫樣式對象。

      對象就是無序鍵值對的集合

                 

    第二種方式:將樣式對象,定義在data中,並直接引用到:style中

      在data中定義:

        

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

               

 

 

    第三種方式:在:style中通過數組,引用多個data上的樣式對象

      在data中定義:

        

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

               

 

 

      

   

   

     

 

      

      


免責聲明!

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



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