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 分钟前
java版连接汇川PLC,发送数据,读取数据,保持重新链接,适用安卓
android·java·python
2501_916007471 小时前
iOS性能调试工具终极指南,从系统底层到多端协同的全方位优化实践(2025版)
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 小时前
iOS崩溃日志深度分析与工具组合实战,从符号化到自动化诊断的完整体系
android·ios·小程序·uni-app·自动化·cocoa·iphone
无糖冰可乐212 小时前
IDEA多java版本切换
java·ide·intellij-idea
合作小小程序员小小店2 小时前
web开发,在线%超市销售%管理系统,基于idea,html,jsp,java,ssh,sql server数据库。
java·前端·sqlserver·ssh·intellij-idea
brucelee1862 小时前
IntelliJ IDEA 设置 Local History 永久保留
java·ide·intellij-idea
不爱学英文的码字机器3 小时前
重塑 Web 性能:用 Rust 与 WASM 构建“零开销”图像处理器
前端·rust·wasm
浩星3 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
Pluto_CSND4 小时前
Java中的静态代理与动态代理(Proxy.newProxyInstance)
java·开发语言
百***46455 小时前
Java进阶-在Ubuntu上部署SpringBoot应用
java·spring boot·ubuntu