el-badge 实现数据为0的时候不显示红点

前言

el-badge 是elementui的组件,通过一定的偏移量进行显示数字
使用

   <el-badge :value="noticesNum"  :max="99"><span class="header-notice-icon"><IconifyIconOffline :icon="Bell" /></span></el-badge>

配置

:value="“显示value数字
is-dot 显示红点不显示数字
:hidden=”"不显示的设置
max是最大数字 只有在value的时候生效 数字超过max就是显示99+

代码

      <el-badge :value="noticesNum" :hidden="noticesNum == 0" :max="99"><span class="header-notice-icon"><IconifyIconOffline :icon="Bell" /></span></el-badge>

当noticesNum为0的时候就不显示红点
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/277767.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java判断字符串是不是数字

描述&#xff1a;通过Java判断一个字符串&#xff0c;是不是数字。这里包括正数、负数、浮点数、科学计数法 代码&#xff1a; import java.util.regex.Pattern;public class Test {public static void main(String[] args) {System.out.println(isNumeric("12.23")…

RocketMQ —消费重试

消费者出现异常&#xff0c;消费某条消息失败时&#xff0c; Apache RocketMQ 会根据消费重试策略重新投递该消息进行故障恢复。本文介绍消费重试机制的原理、版本兼容性和使用建议。 一、应用场景​ Apache RocketMQ 的消费重试主要解决的是业务处理逻辑失败导致的消费完整性…

记录 | mac安装node

第一种方法(下载官网对应 node 版本的 .pkg文件) 访问nodejs官网&#xff08;Node.js 中文网&#xff09;选择合适的版本 双击刚下载的 .pkg 文件&#xff0c;进行安装 安装完成后检查 node 和 npm 的版本 node -v npm -v第二种方法,是使用 Homebrew 使用命令安装 //默认安…

【Oracle】创建表

目录 方法一&#xff1a;CREATE TABLE 语法 创建表示例1&#xff1a;创建stuinfo(学生信息表) 创建表示例2&#xff1a;添加stuinfo(学生信息表)约束 方法二&#xff1a;CREATE TABLE AS 语法 创建表示例3&#xff1a; 创建表示例4&#xff1a;实现对select查询的结果进行…

Impala4.x源码阅读笔记(一)——HdfsTextScanner解析

前言 本文为笔者个人阅读Apache Impala源码时的笔记&#xff0c;仅代表我个人对代码的理解&#xff0c;个人水平有限&#xff0c;文章可能存在理解错误、遗漏或者过时之处。如果有任何错误或者有更好的见解&#xff0c;欢迎指正。 在文章Impala3.4源码阅读笔记&#xff08;七…

Java中常见需要重写equals方法的类

目录 导言 一、自定义类 二、集合类 三、字符串类 四、数组类 五、枚举类 结论 导言 在Java编程中&#xff0c;equals方法是用来比较两个对象是否相等的关键方法之一。然而&#xff0c;在某些情况下&#xff0c;Java提供的默认equals方法可能无法满足我们的需求。因此&a…

ipa文件怎么去除包体内的插件在线签名工具步骤

当开发者完成iOS应用的开发并构建完成后&#xff0c;应用程序会被打包为一个.ipa文件&#xff0c;这是一个iOS App Store的安装包格式。在某些情况下&#xff0c;开发者可能需要去除.ipa文件中包含的插件&#xff08;通常指的是app extension、frameworks或watch apps等&#x…

商城后台管理系统--->新闻简报(富文本编辑器,文章,图片上传)

在商城的项目里面需要添加新闻&#xff0c;使用富文本编辑器&#xff0c;我用的是 wangEditor这个编辑器挺好用的&#xff0c;而且也方便简单&#xff0c;官网也是中文的wangEditor 这是做的添加新闻的页面 我用的是SCUI框架,引入的是npm,具体可看官网 npm install wangedit…

IDEA快捷键注释代码设置不从行开头开始

我们平时在用IDEA开发项目时会发现&#xff0c;快捷键注释的//总是在代码的行开头上面&#xff0c;如下图所示&#xff1a; 这样就显得代码很不美观&#xff0c;那如何才能使注释//贴紧代码呢&#xff1f;需要在IDEA中进行如下配置&#xff1a; 点击Apply之后就可以了&#xff…

Goldstein枝切法对存在间断相位缺陷的解缠研究

摘要: Goldstein枝切法作为相位解缠中路径积分法的重要算法之一&#xff0c;其解缠结果易受到噪声或间断相位缺陷所引起的残差点影响。为了研究相位间断缺陷对解缠算法的影响&#xff0c;模拟了具有间断相位缺陷的数据&#xff0c;采用 Gold-stein枝切法进行了系统的解缠研究。…

springboot发送邮件,内容使用thymeleaf模板引擎排版

springboot发送邮件,内容使用thymeleaf模板引擎排版 1、导入jar包2、yml设置3、收件人以及收件信息设置4、发邮件service5、模版页面6、controller 1、导入jar包 <!--发送邮件--><dependency><groupId>org.springframework.boot</groupId><artifac…

十五 动手学深度学习v2计算机视觉 ——全连接神经网络FCN

文章目录 FCN FCN 全卷积网络先使用卷积神经网络抽取图像特征&#xff0c;然后通过卷积层将通道数变换为类别个数&#xff0c;最后通过转置卷积层将特征图的高和宽变换为输入图像的尺寸。 因此&#xff0c;模型输出与输入图像的高和宽相同&#xff0c;且最终输出通道包含了该空…