1. 程式人生 > >3-5 Vue中的樣式綁定

3-5 Vue中的樣式綁定

spa 顯示效果 img style 顯示 png nbsp 解決 info

Vue中的樣式綁定:

本案例,簡單設計一個<div>的點擊綁定事件來改變div的樣式效果

方法一:【class】

(class和對象的綁定)

技術分享圖片

//如上,運用class和一個對象的形式來解決樣式和數據的綁定效果,這種語法叫做class的對象綁定

//效果如下圖:

技術分享圖片

//當點擊div,右側的html代碼就會給div添加一個class,並且實現div中的文字變紅色的效果。。。

======================================================

②(class和數組的綁定)

技術分享圖片

//如上,運用class和數組相綁定的用法,當這個數組裏面寫了一個內容,這個內容是個變量。class上會顯示這個變量對應的內容

//顯示效果和之前一樣

=========================================================

方法二:【style】

(style和對象的綁定)

技術分享圖片

//這裏運用style結合對象的形式來編寫。data中接收傳進來的styleObj對象,styleObj裏面的書寫格式和css一樣

//顯示效果如下圖:

技術分享圖片

//運用這種方法,div中添加了style屬性,默認為black。當點擊div,style的值就變成了red。因此達到實現效果。。。

======================================================

(style和數組的綁定)

技術分享圖片

//這個樣式由數組裏的對象所決定,寫法和class一樣,只不過改為數組形式就行了。而且因為是數組,所以可以掛載多個對象(如上圖第12行代碼,但要註意書寫格式) //第12行和第22行顯示效果一樣的,因為數組可以掛載多個對象 //所以,顯示的效果如下: 技術分享圖片

3-5 Vue中的樣式綁定