html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别

今天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的变量，这个变量有值的话，该标签上就会添加一个以这个值命名的类，没有的话就不添加，从而达到了我要的效果。最后就是当当当，控制台上看类名已经正确的添加上，页面也显示出来啦，撒花！