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

相关推荐
Zoey的笔记本2 分钟前
「软件开发缺陷管理工具」的闭环追踪设计与自动化集成架构
java·服务器·前端
Sapphire~5 分钟前
【前端基础】04-XSS(跨站脚本攻击,Cross-Site Scripting)
前端·xss
奔跑的web.7 分钟前
Vue 3.6 重磅新特性:Vapor Mode 深度解析
前端·javascript·vue.js
MediaTea7 分钟前
Python OOP 设计思想 13:封装服务于演化
linux·服务器·前端·数据库·python
爱敲代码的婷婷婷.8 分钟前
patch-package 修改 node_modules流程以及注意点
前端·react native·前端框架·node.js
极客先躯9 分钟前
高级java每日一道面试题-2025年5月09日-基础篇[协议-注解-缓存]-JCache(JSR-107)是什么?它的主要目标是什么?
java·spring·缓存
u0104058369 分钟前
Java应用的链路追踪:实现分布式跟踪
java·开发语言·分布式
这是个栗子12 分钟前
【API封装参数传递】params 与 API 封装
开发语言·前端·javascript·data·params
凌栀茗20 分钟前
html第二天
前端·javascript·html
你脸上有BUG21 分钟前
CSS实现透明内层+渐变边框的优雅方案
前端·css·毛玻璃