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时,文本的字体颜色将变为蓝色

相关推荐
Hello.Reader1 分钟前
算法基础(十一)—— 递归树如何看懂分治算法的运行时间
java·算法·排序算法
别问,问就是菜鸡1 分钟前
阿里云效前端流水线自动化部署
前端·阿里云·自动化·持续部署
燐妤3 分钟前
前端HTML编程4:深入学习CSS
前端·学习·html
2301_816374337 分钟前
服务访问的用户认证
前端·网络
XS0301067 分钟前
从浏览器到互联网的完整数据流
前端·数据库·servlet·交互
程序员三明治7 分钟前
【AI】一文讲清 RAG:从大模型局限到企业级知识库落地流程
java·人工智能·后端·ai·大模型·llm·rag
Devin~Y8 分钟前
大厂 Java 面试实录:Spring Boot/Cloud、Kafka、Redis、JVM、K8s、RAG 一条龙(小Y翻车版)
java·jvm·spring boot·redis·spring cloud·kafka·kubernetes
无限进步_9 分钟前
【C++】深入右值引用:移动语义与完美转发
java·开发语言·c++
霑潇雨10 分钟前
原生 Zookeeper 实现分布式锁案例
java·分布式·zookeeper·云原生·maven
小王C语言10 分钟前
【线程同步与互斥】:互斥量(锁)、条件变量(唤醒等待线程)、生产者消费者模型
java·开发语言