vue“或“-多条件判断

最新推荐文章于 2025-08-30 15:40:52 发布

原创最新推荐文章于 2025-08-30 15:40:52 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

背景

想通过文章的状态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'"