vue“或“-多条件判断

智商不够_熬夜来凑

于 2021-11-16 11:46:15 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/gzyh_tech/article/details/121352676

这段代码展示了如何使用 Vue 模板语法根据 `scope.row.status` 的值来动态设置组件的背景颜色。当 status 为 2 时，背景色设为 'success'，为 1 时设为 'warning'，其他情况设为 'info'。这有助于在前端界面上直观地展示数据状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

想通过文章的状态status，判断并确定当前背景颜色

代码如下

<tag :type="Number(scope.row.status) === 2?'success':Number(scope.row.status) === 1?'warning':'info'">
      {{scope.row.status|EnxStatus(scope.row.status)}}
</tag>  

// 通过组件tag的type确定不同颜色，
//:type="Number(scope.row.status) === 2?'success':Number(scope.row.status) === 1?'warning':'info'"