uniapp三元表达式判断状态更改字体颜色?

简介: uniapp三元表达式判断状态更改字体颜色?

html

<template>
  <view>
    <text :style="getStatusColor(status)">状态: {{ status }}</text>
  </view>
</template>

script

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

相关文章
|
5月前
Uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
Uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
49 0
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
5月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
303 0
|
11月前
|
存储 前端开发 CDN
解决uniapp静态文件字体包太大打包大小超出限制
解决uniapp静态文件字体包太大打包大小超出限制
|
容器
uniapp滚动页面改变背景颜色
uniapp滚动页面改变背景颜色
339 0
|
JavaScript
uniapp vue和Nvue使用外部字体iconfont
uniapp vue和Nvue使用外部字体iconfont
490 0
uniapp vue和Nvue使用外部字体iconfont
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
43 7
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
60 7
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
下一篇
无影云桌面