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

相关推荐
cxxcode2 分钟前
前端模块化发展
前端
不务正业的前端学徒6 分钟前
docker+nginx部署
前端
Renhao-Wan8 分钟前
Java 并发基石:AQS (AbstractQueuedSynchronizer)
java·开发语言
不务正业的前端学徒12 分钟前
webpack/vite配置
前端
hhcccchh28 分钟前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf1989052530 分钟前
Vue 框架相关中文文献
前端·javascript·vue.js
zlp199234 分钟前
xxl-job java.sql.SQLException: interrupt问题排查(二)
java·开发语言
粥里有勺糖36 分钟前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
sunnyday042637 分钟前
深入理解Java日志框架:Logback与Log4j2配置对比分析
java·log4j·logback
浩瀚地学41 分钟前
【Java】异常
java·开发语言·经验分享·笔记·学习