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

相关推荐
yingyima几秒前
用 Cron 加 Webhook 打通自动化工作的任督二脉
前端
JackieDYH2 分钟前
CSS Flexbox 与 Grid 的默认行为-布局的底层机制
前端·css·html
彩票管理中心秘书长3 分钟前
E2E测试入门:别让用户帮你点鼠标了,找个机器人替你打工吧
前端
菜蒙爱学习4 分钟前
【Markdown】可用的所有 HTML 标准颜色
前端·html
Java面试题总结5 分钟前
Spring Boot:别再重复造轮子,这些内置功能香麻了
java·spring boot·后端
里欧跑得慢10 分钟前
CSS 嵌套:编写更优雅的样式代码
前端·css·flutter·web
里欧跑得慢10 分钟前
CSS变量与自定义属性详解
前端·css·flutter·web
yanchGod11 分钟前
CSS page-break-before 属性详解:控制打印分页的艺术
前端·javascript·css·html·css3·html5
练习时长一年12 分钟前
分页插件冲突问题
服务器·前端·windows
迷糊小白告13 分钟前
Java微服务——SpringCloud
java·spring cloud·微服务