<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
- 阅读：34
产品分类： 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绑定的对象的属性也没有问题。
1 个回复
qjr
可以尝试把viewStyle放到computed去触发，这样可以渲染出来的。