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

相关推荐
Zzj_tju34 分钟前
Java 从入门到精通(六):抽象类与接口到底怎么选?
java·开发语言
牛奶7 小时前
AI辅助开发最佳实践:2026年新方法
前端·aigc·ai编程
美好的事情能不能发生在我身上8 小时前
Hot100中的:贪心专题
java·数据结构·算法
myloveasuka8 小时前
Java与C++多态访问成员变量/方法 对比
java·开发语言·c++
C澒8 小时前
微前端容器标准化:公共能力标准化
前端·架构
Setsuna_F_Seiei9 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
Andya_net9 小时前
Spring | @EventListener事件机制深度解析
java·后端·spring
lang201509289 小时前
18 Byte Buddy 进阶指南:解锁 `@Pipe` 注解,实现灵活的方法转发
java·byte buddy
重庆小透明9 小时前
【java基础篇】详解BigDecimal
java·开发语言
青柠代码录9 小时前
【Vue3】Vue Router 4 路由全解
前端·vue.js