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

相关推荐
爬山算法几秒前
Hibernate(46) Hibernate的配置文件如何加载?
java·后端·hibernate
梦6501 分钟前
JavaScript ES5 + ES6+ 字符串 (String) 所有方法大全
前端·javascript·es6
风景的人生2 分钟前
springboot项目用maven插件打包时候报错
java·spring boot·maven
二哈喇子!3 分钟前
基于SSM框架的网上商城购物系统的设计与实现(开源项目——实现CRUD功能整体流程超详细)
java·spring·mybatis·ssm
卜锦元4 分钟前
EchoChat搭建自己的音视频会议系统01-准备工作
c++·golang·uni-app·node.js·音视频
容沁风5 分钟前
pycharm启动报错incompatible with Text-specific LCD
java·pycharm
馨谙10 分钟前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
青w韵22 分钟前
SpringBoot3.x 升级到 SpringBoot 4.x,JDK17升级到JDK21
java·后端·spring
vx_bisheyuange22 分钟前
基于SpringBoot的经方药食服务平台
java·spring boot·后端·毕业设计
王同学 学出来26 分钟前
React案例实操(二)
前端·react.js·前端框架