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

相关推荐
xcl092515 小时前
北京24小时自助健身房系统软件开发实战:从架构到部署全流程指南
java·spring boot·架构
一 乐17 小时前
动漫书销售商城|基于springboot + vue动漫书销售商城(源码+数据库+文档)
java·数据库·vue.js·spring boot·毕业设计
卓怡学长17 小时前
w214基于jsp知道特产网
java·intellij-idea
步行cgn17 小时前
Spring 注解使用详解
java·spring
一条小小yu18 小时前
Spring IoC的理解
java·后端·spring
落魄实习生18 小时前
Agent Scope Java 2.x 系列【7】工具使用
java·开发语言·ai
前端snow18 小时前
ai agent --- postgreSQL 关系型数据库
前端
旺仔学长 哈哈18 小时前
springboot钓鱼爱好者交流平台APP设计与实现
java·spring boot·mysql·充电桩管理系统
卷无止境19 小时前
ECharts:把数据变成故事的可视化利器
前端
Eric_见嘉19 小时前
在职前端 Skill 和 MCP 分享
前端·后端·agent