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

一个大长腿2023-12-25 10:55

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