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

相关推荐
驭渊的小故事几秒前
Spring Boot 注解详解01
java·前端·spring boot
泡海椒1 分钟前
jquick-pdf 超详细入门教程:Java 轻量级 HTML 模板生成 PDF 工具
java·开发语言
蛋先生DX6 分钟前
Java和Go都拍胸脯说"内存我包了",可它们到底是怎么下手的?
java·go·编程语言
pe7er6 分钟前
引子
前端·后端·架构
SimonKing8 分钟前
阅后即焚的加密便签:Cryptgeon,你口袋里的秘密信使
java·后端·程序员
恋猫de小郭14 分钟前
CPF-Flutter 社区提出折叠场景分栏(平行视界) 方案
android·前端·flutter
ss27321 分钟前
Java全栈实战 | 1.3-03 索引原理:联合索引 (a,b,c) 只查 b 走不了索引?B+ 树一图讲透所有索引玄学
java·数据库
aixingpan24 分钟前
aixingpan.cn API开发文档:api_docs_trichart_natal_marx_transit2接口指南
前端·php
csj5025 分钟前
前端基础之《React(13)—表单绑定、列表渲染》
前端·react.js
csj5026 分钟前
前端基础之《React(12)—条件渲染》
前端·react.js