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

錯誤寫法

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

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

然后查找了一些網上別人實現相同功能的操作，發現他們的class前面加了冒號，自己嘗試了一下，加上冒號，果然可以了

正確寫法

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

于是乎，官網走起，查看了一下官網中綁定HTML class這一節，鏈接如下：

Class 與 Style 綁定 — Vue.js

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

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

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

綁定對象

綁定表達式

綁定數組

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

如果是false，當然就沒有這個類，例如

例子

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。