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

相关推荐
汤面不加鱼丸3 分钟前
flutter实践:比例对比线图实现
前端·flutter
pjx9874 分钟前
超越单体:进入微服务世界与Spring Cloud概述
java·spring cloud·微服务
天天摸鱼的java工程师5 分钟前
爆肝 30 天!从 JVM 调优到百万级 QPS,我的 Java 性能飞升全记录
java·后端
Jenlybein6 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ 面向对象篇 ]
前端·javascript·面试
专业掘金8 分钟前
0429 手打基础丸
前端
TDengine (老段)8 分钟前
TDengine 订阅不到数据问题排查
java·数据库·tdengine
还有发量的前端程序员8 分钟前
Vue3初始化完整过程和原理
前端
Jenlybein9 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ Generator 篇 ]
前端·javascript·面试
冼紫菜10 分钟前
Spring Cloud 项目中优雅地传递用户信息:基于 Gateway + ThreadLocal 的用户上下文方案
java·开发语言·spring boot·后端·spring cloud·gateway
为美好的生活献上中指11 分钟前
java每日精进 4.29【框架之自动记录日志并插入如数据库流程分析】
java·linux·数据库