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

相关推荐
Aliex_git几秒前
前端监控笔记(一)
前端·笔记·学习
Highcharts.js1 分钟前
Highcharts Grid Lite:企业免费表格数据的基本工具
前端·javascript·信息可视化·免费·highcharts·表格工具
老萬頭3 分钟前
【技术深水区】抖音 WEB 端逆向:从零到一拿下 a_bogus 参数
前端·爬虫·python
程序员小李白4 分钟前
Vue 组件通信 极简速记版
前端·javascript·vue.js
光影少年4 分钟前
跨域问题如何解决?
前端·nginx·前端框架
编程学习0015 分钟前
记一次Java面试
java·面试
C澒6 分钟前
微前端容器标准化 —— 公共能力篇:通用监控能力
前端·架构
念念不忘 必有回响7 分钟前
Next.js 14-16 全栈开发实战:从 App Router 核心原理到 Server Actions 深度剖析
前端·nextjs
计算机学姐8 分钟前
基于SpringBoot+Vue的家政服务预约系统【个性化推荐+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·java-ee
一只大袋鼠8 分钟前
请求转发vs重定向、同源策略与跨域
java·javaweb·同源策略·请求转发·重定向