知识分类
后端
前端
设计
开源组件/产品
APP
其他
广告招募

uniapp uni-badge 隐藏和显示正确操作方法

管理员
发布于:2023-10-07 22:15:49

uni-badge:数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景。--来自官方的介绍。

当角标的数字小于等于0时,那么这个角标就不需要显示,又该如何隐藏呢?用VUE的V-IF方法是可以显示和隐藏的但是uni-badge一般包含着其他的组件,如果用V-IF判断 那么连包含的组件也一起隐藏了。

那么应该如何规避这个问题呢 ?可以使用 custom-style 自定义样式的display来隐藏和显示,代码如下:

:custom-style="{'display': appointmentcount.beconfirmed>0?'block':'none'}"

custom-style的动态的绑定方法和style一直。

上一篇:记录一下,Vue3中watch监听Props属性值变化的正确用法。
下一篇:vue3 如何快速将后台返回的JSON类型赋值给的reactive对象
搜索内容
最新文章
  • 连接WIFI出现无Internet
  • 免费AI SEO工具,SEO的AI生
  • OBS在银河麒麟或ubuntu等核心
  • 常见主板开机进入bios热键,一张图
  • 微软常用运行库VC++合集下载,解决
  • MSYS2中安装使用GCC的正确方法
  • 用了这些网站,多出来的时间让你摸鱼
  • 优麒麟操作系统(麒麟系统社区版)安装
  • 推荐一个Vscode插件,让你写正则
  • MinDoc文档管理系统linux环
精彩文章
  • 1 php将数字转成EXCEL列名,支持
  • 2 什么是PHP站群以及使用php开源框
  • 3 连接WIFI出现无Internet
  • 4 免费AI SEO工具,SEO的AI生
  • 5 FrameCoder非可,基于web
  • 6 PBOOTCMS安全加固方法解析与实
  • 7 常见主板开机进入bios热键,一张图
  • 8 MSYS2中安装使用GCC的正确方法
  • 9 Layui 怎么样更换主题颜色?
  • 10 小程序真机调试 报错 define
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号