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

相关文章
|
4月前
Uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
Uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
23 0
|
8月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
5月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
93 0
|
6月前
|
存储 前端开发 CDN
解决uniapp静态文件字体包太大打包大小超出限制
解决uniapp静态文件字体包太大打包大小超出限制
|
8月前
|
容器
uniapp滚动页面改变背景颜色
uniapp滚动页面改变背景颜色
136 0
|
JavaScript
uniapp vue和Nvue使用外部字体iconfont
uniapp vue和Nvue使用外部字体iconfont
395 0
uniapp vue和Nvue使用外部字体iconfont
|
2天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
6 0
|
2天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
|
6天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
14 1
|
6天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
14 0