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

相关推荐
小雅痞2 分钟前
[Java][Leetcode middle] 209. 长度最小的子数组
java·算法·leetcode
谢尔登9 分钟前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo10 分钟前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
二哈赛车手13 分钟前
新人笔记---项目中简易版的RAG检索后评测指标(@Recall ,Mrr..)实现
java·开发语言·笔记·spring·ai
做时间的朋友。14 分钟前
精准核酸检测
java·数据结构·算法
许彰午26 分钟前
CacheSQL(五):桥接篇
java·数据库·缓存·系统架构
陈随易31 分钟前
2年没用Nodejs了,Bun很香
前端·后端·程序员
ATCH IERV37 分钟前
Java实战:Spring Boot application.yml配置文件详解
java·网络·spring boot
donecoding1 小时前
Corepack 完全解析:从懵到懂,包管理器自由了
前端·node.js·前端工程化
yqcoder1 小时前
端经典面试题:为什么 0.1 + 0.2 !== 0.3?
前端·css