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

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

C++中cout后面输出时加endl和不加endl的区别
endl就是end line的意思,也就是"结束此行",实际上有两个操作 1 换行 2 对缓冲流进行冲刷,使得流中所有剩余字符被写入输出序列. 其实作用说白了就是加<< ...
vue中文件上传方法
vue中文件上传方法(图片,表格) //html部分 <input type="file" id="people-export" ref="in ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
vue中style的scoped属性的设计方式
vue中style的scoped属性这里是怎实现的呢? scoped三条渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性在每句css选 ...
vue中style的scoped属性
原文链接(这两篇讲得超级好):vue中慎用style的scoped属性_June.1的博客-CSDN博客_scoped scoped 和 deep的用法深究_格竹悟道的博客-CSDN博客_scoped ...
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...
html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...
js中方法调用加括号和不加括号的区别
前言一个页面需要使用到setInterval和setTimeout.使用过程中对于方法的调用出现了加括号和不加括号的区别,当然在其他的场景也有发生,window.load = init等等区别以 ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...

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

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

最新文章

热门文章