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

相关推荐
XiYang-DING几秒前
【Java】二叉树
java·开发语言·数据结构
gongzemin1 分钟前
怎么在VS Code 调试vue2 源码
前端·vue.js
烟话69 分钟前
Vue3响应式原理【通俗理解】
前端·javascript·vue.js
凌冰_11 分钟前
Servlet+Thymeleaf + Fetch 实现无刷新异步请求
java·servlet
深蓝轨迹16 分钟前
面试常见的jdk---LTS版本新特性梳理
java·面试·jdk
浩星18 分钟前
electron系列5:深入理解Electron打包
前端·javascript·electron
患得患失94923 分钟前
【前端WebSocket】心跳功能,心跳重置策略、双向确认(Ping-Pong) 以及 指数退避算法(Exponential Backoff)
前端·websocket·算法
英俊潇洒美少年25 分钟前
React 实现 AI 流式打字机对话:SSE 分包粘包处理 + 并发优化
前端·javascript·react.js
chQHk57BN28 分钟前
前端测试入门:Jest、Cypress等测试框架使用教程
前端
Stella Blog33 分钟前
狂神Java基础学习笔记Day01
java·笔记·学习