這篇文章主要介紹“Vue.js怎么綁定class屬性”，在日常操作中，相信很多人在Vue.js怎么綁定class屬性問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue.js怎么綁定class屬性”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

獲嘉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

一、"  "內(nèi)是vue對(duì)象內(nèi)存在的對(duì)象

        :class = " 語(yǔ)句" ， 語(yǔ)句中傳入的是vue建立的變量，計(jì)算屬性，函數(shù)等的時(shí)候，就會(huì)把vue中所對(duì)應(yīng)的對(duì)象的值替換成class的值。傳入的是字符串'   '的話就直接作為class屬性值。

        這種情況不能綁定一個(gè)class值，并且只能通過綁定的class的變量的值修改才能改變class屬性的值。

        代碼實(shí)例：

二、"  " 內(nèi)為  [  ] 數(shù)組

        當(dāng)我們想綁定多個(gè)class屬性值時(shí)，就可以在"  "內(nèi)傳入 [  ]  數(shù)組。數(shù)組內(nèi)的值是vue內(nèi)的對(duì)象變量名。如果帶有'  '則傳入的就是實(shí)際值，不會(huì)被替換。

        代碼實(shí)例：

        頁(yè)面效果：  顯然標(biāo)簽屬性會(huì)是 class="active font c3"; 

三、 "  "內(nèi)為 {   }  json對(duì)象

        當(dāng)我們想綁定多個(gè)class屬性值，設(shè)置的每個(gè)class屬性值是已經(jīng)給出的。可以設(shè)置綁定的屬性值時(shí)決定要還是不要，比如 class = "n1 n2", 我們通過vue可以將設(shè)置成class = "n1"，但不能通過vue直接設(shè)置成class="n3"  ； 

        我們就要用到 {  } 對(duì)象來表達(dá)。只有每一個(gè)設(shè)置的class屬性值對(duì)應(yīng)的一個(gè)boolean類型的值來決定該標(biāo)簽是否擁有該屬性值，但對(duì)應(yīng)的boolean值是true才給class屬性賦值。

        格式為：

該類型的格式為   :class = " { n1 : b1 , n2:  b2  }" ；

注意：

// b1,b2是boolean類型

//  n1,n2不在被vue對(duì)象替換，就是純文本 !無論加不加" ", 如上述 ，假設(shè)b1 = true, b2=true。則在頁(yè)面渲染時(shí)， 該標(biāo)簽屬性   class = " n1  n2"

         代碼演示：  

        頁(yè)面效果：果不其然，  :class="{active:isTrue1,font:isTrue2}"   中active,font并沒有被vue替換，而是直接當(dāng)成class屬性值 !

到此，關(guān)于“Vue.js怎么綁定class屬性”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！