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 分钟前
C++零成本抽象理论深度拆解:现代C++如何在不牺牲性能的前提下提供高级语法封装
java·开发语言·c++
J船长17 分钟前
烂笔头扫盲:Embedding 与语义匹配:从概念到 pgvector 落地
前端
我是唐青枫32 分钟前
Java Netty 实战指南:从 NIO 线程模型到 TCP 编解码和心跳机制
java·tcp/ip·nio
小白说大模型35 分钟前
从向量嵌入到复杂 Agent:LLM、LangChain、LangGraph 完整科普
java·开发语言·人工智能·gpt·深度学习·langchain
程序员黑豆1 小时前
鸿蒙应用开发之模拟器安装与使用教程
前端·harmonyos
王莎莎1 小时前
MCP 解决的是工具接入,科研 Agent 还缺的是科学证据接口标准化
前端·人工智能
zhanghaha13142 小时前
Python语言基础:4_数据类型转换
java·前端·python
kyriewen2 小时前
别再写useMemo了——2026年这5个React性能优化已经是反模式
前端·react.js·ai编程
OpenTiny社区2 小时前
TinyRobot v0.5.0 新版本强在哪?
前端·vue.js·github
奇牙coding2 小时前
gpt-5.6-sol 接入指南:reasoning_effort 参数配置、推理链验证与常见报错排查
前端·css·gpt·ai