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

相关推荐
李松桃14 小时前
01HTML-CSS-入门知识点
前端·css
matlabgoodboy14 小时前
Python代做java代码编写C++大数据R语言Hadoop/spark/flink/C语言
java·大数据·python
广州华水科技14 小时前
北斗GNSS变形监测系统是什么?主要有哪几种应用?
前端
晴天1614 小时前
【跨桌面应用开发】Neutralinojs快速入门指南
前端·javascript·electron·node.js
实心儿儿15 小时前
C++ —— 红黑树
java·开发语言·算法
啥都想学点15 小时前
第18天:Springboot 项目搭建
java·spring boot·后端
Fang fan15 小时前
Java集合
java·开发语言·算法
福运常在15 小时前
股票数据API(21)如何获取股票指数最新分时交易数据
java·python·maven
计算机徐师兄15 小时前
Java基于微信小程序的青少年科普教学系统【附源码、文档说明】
java·微信小程序·青少年科普教学系统小程序·java青少年科普教学小程序·青少年科普教学微信小程序·青少年科普教学小程序·科普教学微信小程序
爱学习的程序媛15 小时前
【Web前端】深入解析JavaScript异步编程
开发语言·前端·javascript·ecmascript·web