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

相关推荐
Highcharts.js2 分钟前
Highcharts for Python|用 Pythonic 的方式构建AI数据可视化图表
前端·人工智能·python·信息可视化·数据科学·highcharts·ai可视化
是罐装可乐4 分钟前
SPA首屏接口过多导致卡顿?一套前端请求调度方案彻底解决
前端·性能优化·spa·前端架构·请求队列
大尚来也7 分钟前
Java 线程池深度解析:ThreadPoolExecutor 七大参数与核心原理
java·python·算法
Mike_6669 分钟前
百度云车牌调用识别-Java工程
java·百度云·车牌识别·在线调用
白宇横流学长11 分钟前
基于 SpringBoot 的社团活动报名管理系统设计与实现
java·spring boot·后端
子豪-中国机器人13 分钟前
python AI自动化
java·前端·python
JavaPub-rodert23 分钟前
Codex GPT-5.4 使用教程(命令大全版)
前端·chrome·gpt·codex
农夫山泉不太甜25 分钟前
Expo插件开发完全指南:原理剖析与实战进阶
前端
wy31362282127 分钟前
Android——组件化实战:Application启动时用ARouter实现跨模块调用
java·前端·spring
程序员阿峰30 分钟前
前端3D·Three.js一学就会系列: 第一个3D网站
前端·three.js