uniapp三元表达式判断状态更改字体颜色?

html

html 复制代码
<template>
  <view>
    <text :style="getStatusColor(status)">状态: {{ status }}</text>
  </view>
</template>

script

javascript 复制代码
<script>
export default {
  data() {
    return {
      status: 1
    };
  },
  methods: {
    getStatusColor(status) {
      // 根据状态值返回不同的样式对象
      return {
        color: status === 1 ? 'blue' : 'black'
      };
    }
  }
};
</script>

总结:

在上面的示例中,我们使用:style指令来动态设置文本的样式,通过调用 getStatusColor 方法来返回不同的样式对象。

getStatusColor 方法中使用了三元表达式来判断状态是否等于1。如果状态等于1,则设置 color'blue';否则,设置 color'black'

通过这种方式,当状态等于1时,文本的字体颜色将变为蓝色

相关推荐
码农研究僧几秒前
ruoyi+vue2的前端Demo(不分页、前端分页、后端分页)
前端·vue2·ruoyi
毕设源码-赖学姐1 分钟前
【开题答辩全过程】以 基于JAVA的宠物医院管理系统的设计为例,包含答辩的问题和答案
java·开发语言
Kratzdisteln7 分钟前
【1902】0121-1 Dify工作流节点详细配置(方案B最终版)
java·前端·javascript
lbb 小魔仙9 分钟前
【Java】Java JVM 调优实战:GC 调优参数 + 内存泄漏排查,线上性能提升实战
java·开发语言·jvm
第7个前端10 分钟前
elementplus相同ElMessage只显示一个
前端
大柏怎么被偷了10 分钟前
【Linux】线程的概念
java·linux·jvm
IT 行者12 分钟前
基于Servlet的纯原生Java Web工程之工程搭建:去除依赖的繁琐,返璞归真
java·前端·servlet
wenjianhai13 分钟前
若依(RuoYi-Vue-Plus)框架使用WebSocket(2)
java·若依·websocke4t
霍理迪16 分钟前
js数据类型与运算符
开发语言·前端·javascript
Hi_kenyon17 分钟前
小白理解main.js
前端·javascript·vue.js