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

相关推荐
pippocao2 分钟前
王者荣耀日志组件BqLog为什么这么快之1——高性能实时压缩日志
java
葡萄城技术团队4 分钟前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
AC赳赳老秦6 分钟前
公开 CSV 数据集批量处理实战:用 OpenClaw 高效完成下载、清洗与标准化分析样本生成
java·开发语言·汇编·c++·python·deepseek·openclaw
志尊宝7 分钟前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
Caroline51619 分钟前
GPT Image 2.5还能这么玩!一套提示词生成IP吉祥物,附完整案例
前端·gpt·tcp/ip
ym hyd 11120 分钟前
慢性病精细化管理平台源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·毕设
程序猿乐锅25 分钟前
【黑马点评 | 第七篇】Redis 分布式锁的两种实现
java·数据库·redis·分布式·spring·缓存
SL_staff30 分钟前
JVS私有化交付为何敢承诺100%源码开放与无兜底风险?
java·低代码·全栈
wangyadong31731 分钟前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js
葡萄城技术团队40 分钟前
给 SpreadJS 单元格装上自动完成
前端