伪代码如下：
<text :style="testStyle">{{ totalAmount.in }}</text>
computed: {
testStyle() {
return {
color: 'red'
};
}
},
最终编译的结果：
<text style="[object object]">0</text>
j***@163.com
- 发布：2024-03-31 11:51
- 更新：2024-04-01 17:01
- 阅读：215
产品分类： 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="testStyle">{{ totalAmount.in }}</text>
computed: {
testStyle() {
return {
color: 'red'
};
}
},
预期结果：
<text style="color:red">0</text>
<text style="color:red">0</text>实际结果：
<text style="[object object]">0</text>
<text style="[object object]">0</text>
bug描述：
在组件上使用:style动态绑定样式时，如果在computed中返回的是对象，则最终编译的值是[object object]
2 个回复
喜欢技术的前端 - QQ---445849201
可以换个写法 <text :style="[testStyle]">{{totalAmount.ins}}</text>
HRK_01
在小程序上，目前还不支持返回对象，建议遍历对象后以字符串的形式返回return "color:red;"