1. 程式人生 > >CSS動態樣式---基礎-控制是否添加CSS類

CSS動態樣式---基礎-控制是否添加CSS類

取反 去除 https fff 語句 col 聯系 一起 data

功能:三個背景框,點擊按鈕添加CSS屬性,再次點擊去除CSS屬性。

比如,我想實現只有點擊這個元素時才添加這個red類,再次點擊時移除red類,為了實現這個功能,需要在Vue實例內添加data屬性,以便和模板代碼建立聯系。attachRed默認false,即默認不添加,點擊方框時,需要對attachRed取反,為了按照指定條件添加CSS類,需要用 :class綁定到class屬性,即時已經添加了demo這個class屬性也無妨,這裏的“:class”用的是Vue語法,不再使用HTML元素本身的class屬性,它確實是與class屬性綁定,而Vue在背後把這些語句合並為一個class對象,所i這裏需要傳入一個JavaScript對象,著就是Vue要獲取的參數,在這個對象裏,鍵應該是下要添加的CSS類名,值用來控制是否添加CSS類,應該是true或者false,在這裏我要添加CSS類red,直接寫red即可,也可以帶上單引號,如果類中包含特殊字符,就必須帶上單引號。然後查看效果,點擊方框時,背景在紅灰之間切換。這一行代碼把CSS類red作為鍵名,引用這裏的CSS代碼,然後與attachRed聯系到一起,鼠標點擊可以讓attachRed不斷在true和false之間切換。

技術分享圖片

CSS動態樣式---基礎-控制是否添加CSS類