今天vue的項目中，因為很多結(jié)構(gòu)一樣的條目，所以想到了使用循環(huán)。但是問題來了，每個條目的圖標不一樣，這就需要在循環(huán)中依次添加不同的字體圖標的類名。直接使用class來操作，結(jié)果沒有報錯，但是圖標也沒有顯示出來

錯誤寫法

這讓我疑惑，平常類名不就是這么加的嗎？打開控制臺一看，發(fā)現(xiàn)本來應(yīng)該是替換成數(shù)據(jù)中的類名，并沒有替換，還是item.icon,顯然這樣操作是不行的。

那。。。。控制臺上標簽的類居然是item.icon

然后查找了一些網(wǎng)上別人實現(xiàn)相同功能的操作，發(fā)現(xiàn)他們的class前面加了冒號，自己嘗試了一下，加上冒號，果然可以了

正確寫法

問題是解決了，疑惑卻還存在,為什么加上冒號就可以了呢？

于是乎，官網(wǎng)走起，查看了一下官網(wǎng)中綁定HTML class這一節(jié)，鏈接如下：

Class 與 Style 綁定 — Vue.js

終于解答了我的疑惑，總結(jié)原因如下：

1 ：class是v-bind:class的簡寫，這樣可以動態(tài)的綁定類

2? 傳入的值可以是變量，對象，數(shù)組,表達式等，例如

綁定對象

綁定表達式

綁定數(shù)組

3? ?最后標簽上的類是否存在，取決于綁定的類對應(yīng)的值，轉(zhuǎn)換成布爾值是true還是false，如果是true，就有這個類

如果是false，當(dāng)然就沒有這個類，例如

例子

4? 另外注意一點，就是class類與：class綁定的類是可以共存的，例子也參考上圖

綜上所述，就是在我原來的代碼中，我通過class綁定了一個iconfont的類，然后通過：class綁定了一個item.icon的變量，這個變量有值的話，該標簽上就會添加一個以這個值命名的類，沒有的話就不添加，從而達到了我要的效果。最后就是當(dāng)當(dāng)當(dāng)，控制臺上看類名已經(jīng)正確的添加上，頁面也顯示出來啦，撒花！

總結(jié)

以上是生活随笔為你收集整理的html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。