功能:三個背景框,點擊按鈕添加CSS屬性,再次點擊去除CSS屬性。
創(chuàng)新互聯(lián)公司是一家專業(yè)提供彰武企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都做網(wǎng)站、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為彰武眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。
比如,我想實現(xiàn)只有點擊這個元素時才添加這個red類,再次點擊時移除red類,為了實現(xiàn)這個功能,需要在Vue實例內(nèi)添加data屬性,以便和模板代碼建立聯(lián)系。attachRed默認(rèn)false,即默認(rèn)不添加,點擊方框時,需要對attachRed取反,為了按照指定條件添加CSS類,需要用 :class綁定到class屬性,即時已經(jīng)添加了demo這個class屬性也無妨,這里的“:class”用的是Vue語法,不再使用HTML元素本身的class屬性,它確實是與class屬性綁定,而Vue在背后把這些語句合并為一個class對象,所i這里需要傳入一個JavaScript對象,著就是Vue要獲取的參數(shù),在這個對象里,鍵應(yīng)該是下要添加的CSS類名,值用來控制是否添加CSS類,應(yīng)該是true或者false,在這里我要添加CSS類red,直接寫red即可,也可以帶上單引號,如果類中包含特殊字符,就必須帶上單引號。然后查看效果,點擊方框時,背景在紅灰之間切換。這一行代碼把CSS類red作為鍵名,引用這里的CSS代碼,然后與attachRed聯(lián)系到一起,鼠標(biāo)點擊可以讓attachRed不斷在true和false之間切換。