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

相关推荐
Felicity_Gao43 分钟前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
兔兔爱学习兔兔爱学习2 小时前
Spring Al学习7:ImageModel
java·学习·spring
我狸才不是赔钱货2 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~3 小时前
前端三剑客之一 HTML~
前端·html
lang201509283 小时前
Spring远程调用与Web服务全解析
java·前端·spring
m0_564264184 小时前
IDEA DEBUG调试时如何获取 MyBatis-Plus 动态拼接的 SQL?
java·数据库·spring boot·sql·mybatis·debug·mybatis-plus
崎岖Qiu4 小时前
【设计模式笔记06】:单一职责原则
java·笔记·设计模式·单一职责原则
Hello.Reader4 小时前
Flink ExecutionConfig 实战并行度、序列化、对象重用与全局参数
java·大数据·flink
熊小猿5 小时前
在 Spring Boot 项目中使用分页插件的两种常见方式
java·spring boot·后端
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js