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

相关推荐
盐水冰2 分钟前
【烘焙坊项目】后端搭建(9)- 缓存实现及购物车相关功能开发
java·后端·spring
gameboy0312 分钟前
在Nginx上配置并开启WebDAV服务的完整指南
java·运维·nginx
重庆小透明4 分钟前
【面试问题第一篇】快手后端java一面
java·面试·职场和发展
阿鑫_9966 分钟前
通用-ESLint+Prettier基础知识
前端·后端
1104.北光c°9 分钟前
我理解的Leaf号段模式:美团分布式ID生成系统
java·开发语言·笔记·分布式·github·leaf
ai超级个体11 分钟前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js·threejs·网页设计·网页灵感·网页分享
Oneslide12 分钟前
块级元素竖向堆叠且宽度默认会撑满其父容器的可用宽度
前端
空空潍13 分钟前
RabbitMQ高级(2w字笔记)
java·rabbitmq·java-rabbitmq
i建模17 分钟前
npm使用大全
前端·npm·node.js
李剑一17 分钟前
Cesium 实现园区水景!3 种水面效果,Water 材质 5 分钟搞定
前端·vue.js·cesium