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

Vue class动态绑定样式,多分支判断绑定或类似Switch判断该如何使用

管理员
发布于:2023-09-09 21:49:07
导读:当Vue的class样式依据状态status进行绑定,且该状态有多种情况(如status=0、1、-1对应不同样式)时,可采用特定语法实现判断绑定。具体代码为::class="{'YY-bg-grey':item.status===0,'YY-bg-primary':item.status==1,'YY-bg-red':item.status==-1}",此方式能清晰明确地根据不同的status值来绑定相应的样式类。

举个例子:如果Vue的class样式是根据状态status来绑定的,这个状态有很多种情况,比如 status=0时为一个样式,status=1时为一个样式,status=-1时是一个样式,那么这种情况应该怎么判断绑定呢?

下面直接给出代码,清晰易懂

:class="{'YY-bg-grey':item.status===0,'YY-bg-primary':item.status==1,'YY-bg-red':item.status==-1}

关键词: Vue class 动态绑定 样式 多分支判断 绑定 Switch 判断
上一篇:uniapp uni-number-box change事件如何传入自定义参数
下一篇:3步教你如何修改uniapp button组件颜色?
搜索内容
最新文章
  • 线程和协程的区别
  • 什么是敏捷式开发?
  • 什么是GEO生成式引擎优化?和SEO
  • 如何保证文件上传安全?
  • Go语言时间格式为什么和其他语言不一
  • 软件许可协议有哪些?之间的区别是什么
  • FrameCoder非可站群框架支持
  • git忽略文件.gitignore,
  • 什么AI模型上下文协议(MCP)?M
  • 为什么有些页面的图片看不见?可能是被
精彩文章
  • 1 MSYS2中安装使用GCC的正确方法
  • 2 vscode用一个插件快速生成Vue
  • 3 Layui 怎么样更换主题颜色?
  • 4 连接WIFI出现无Internet
  • 5 3步教你如何修改uniapp but
  • 6 OBS在银河麒麟或ubuntu等核心
  • 7 FrameCoder非可,基于web
  • 8 JavaScript 判断对象是否为
  • 9 小程序真机调试 报错 define
  • 10 什么是PHP站群以及使用php开源框
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号