【笔记】消息数量提示图标

简介: 消息数量提示图标

静态:

.box:before{content:"hello";}

css3 里面的content 可以使用动态内容结合html5的自定义属性:

// html
<div class="box" :data-text="num">...</div>
// css
.box:before{content:attr(data-text);} /* data-text 是自定义属性 */

当然,element-ui已经有了相应组件:
https://element.faas.ele.me/#/zh-CN/component/badge
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


拓展阅读:

相关文章
|
SQL 关系型数据库 MySQL
Python爬虫-数据处理与存储(二)
Python爬虫-数据处理与存储(二)
113 0
|
存储 监控 Ubuntu
Linux下sysstat安装使用图文详解
Linux下sysstat安装使用图文详解
558 0
Linux下sysstat安装使用图文详解
|
缓存 JavaScript 前端开发
毕设专用 基于Vue的大病保险管理系统 这个开源项目你值得拥有(一)
毕设专用 基于Vue的大病保险管理系统 这个开源项目你值得拥有
195 0
|
设计模式 Oracle Java
【设计模式】我终于读懂了桥接模式。。。
【设计模式】我终于读懂了桥接模式。。。
【设计模式】我终于读懂了桥接模式。。。
|
NoSQL 关系型数据库 MySQL
Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)
Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)
1156 0
|
NoSQL 关系型数据库 MySQL
黑马点评笔记 redis实现优惠卷秒杀(一)
黑马点评笔记 redis实现优惠卷秒杀
371 0
|
Linux 开发工具
《电路/电路原理》—戴维宁(南)定理实战演练
《电路/电路原理》—戴维宁(南)定理实战演练
1138 1
《电路/电路原理》—戴维宁(南)定理实战演练
|
存储
数据结构 赫夫曼树(下)
数据结构 赫夫曼树
208 0
数据结构 赫夫曼树(下)
第十章 channel select 总结
感觉channel在理解起来还有点费劲的, 尤其是select的使用, 既要可以读数据, 又要可以写数据.
243 0
第十章 channel select 总结