<template>
<view>
<view :style="viewStyle">{{viewStyle.backgroundColor}}</view>
<button @click="handleChangeColor">改变颜色</button>
</view>
</template>
<script>
export default {
data() {
return {
viewStyle: {backgroundColor: '#0f0'}
}
},
methods: {
handleChangeColor() {
this.viewStyle.backgroundColor = '#00f'
}
}
}
</script>
6***@tmp.dcloud.io
- 发布：2025-07-16 11:57
- 更新：2025-07-16 16:05
- 阅读：120
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版
HBuilderX类型： 正式
HBuilderX版本号： 4.75
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： Xiaomi 14 Ultra
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
把上述代码放到一个page中，选Vue3，在Android App基座中运行
把上述代码放到一个page中，选Vue3，在Android App基座中运行
预期结果：
view中文字和它的背景颜色都改变
view中文字和它的背景颜色都改变
实际结果：
view中的文字改变了，但它的背景颜色没变
view中的文字改变了，但它的背景颜色没变
bug描述：
修改:style绑定对象的属性值，那个值确实改变了，把它放到{{}}中能看到变化，但是元素的样式没跟着重新渲染(如果整个替换:style绑定的对象，可以让样式重新渲染)。
这个问题只出现在Vue3 App端。换成Vue2就没问题，换成web端也没问题。更改:class绑定的对象的属性也没有问题。
6***@tmp.dcloud.io (作者)
放到computed里相当于整个替换对象，这样确实可以渲染出来，只是替换对象中的属性渲染不出来。
这与Web端或Vue2的行为不一致，没有实现Vue文档中的功能，所以应该是一个bug。
2025-07-17 08:57