uni-app 使用:style动态绑定样式时，如果在computed中返回的是对象，则最终编译的值是[object object]

项目属性	值
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	windows11
HBuilderX类型	正式
HBuilderX版本号	4.07
第三方开发者工具版本号	1.06.2401020
基础库版本号	3.3.4
项目创建方式	HBuilderX

示例代码：

<text :style="testStyle">{{ totalAmount.in }}</text>  

computed: {  
        testStyle() {  
            return {  
                color: 'red'  
            };  
        }  
    },

最终编译的结果：

<text style="[object object]">0</text>

操作步骤：

<text :style="testStyle">{{ totalAmount.in }}</text>  

computed: {  
        testStyle() {  
            return {  
                color: 'red'  
            };  
        }  
    },

预期结果：

<text style="color:red">0</text>

实际结果：

<text style="[object object]">0</text>

bug描述：

在组件上使用:style动态绑定样式时，如果在computed中返回的是对象，则最终编译的值是[object object]

nodeper 1楼•11 天前

可以换个写法 <text :style="[testStyle]">{{totalAmount.ins}}</text>

sinazl 2楼•11 天前作者

在小程序上，目前还不支持返回对象，建议遍历对象后以字符串的形式返回return “color:red;”

songsunli 3楼•11 天前

在 uni-app 中使用 :style 动态绑定样式时，如果在 computed 中返回的是一个对象，最终编译的值是 [object Object]，这是因为 Vue 在处理 :style 绑定时，期望的是一个样式对象或样式字符串，而不是一个对象的字符串表示。

解决方法

确保 computed 返回的是正确的样式对象：computed 应该返回一个对象，对象的键是 CSS 属性名，值是 CSS 属性值。例如：

computed: {
  dynamicStyle() {
    return {
      color: this.textColor,
      fontSize: this.fontSize + 'px'
    };
  }
}

在模板中使用 :style 绑定：

<template>
  <div :style="dynamicStyle">动态样式</div>
</template>

示例代码

<template>
  <div :style="dynamicStyle">动态样式</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    };
  },
  computed: {
    dynamicStyle() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      };
    }
  }
};
</script>