<template>
<view class="pageBox">
{{color}}
</view>
</template>
<script>
export default {
data() {
return {
color: '#FF0000'
}
}
}
</script>
<!-- -->
<style lang="scss" scoped >
.pageBox{
width: 100%;
min-height: 100vh;
color: v-bind(color);
box-sizing: border-box;
}
</style>
LwView
- 发布：2022-02-14 11:54
- 更新：2025-09-08 19:18
- 阅读：3211
产品分类： HbuilderX
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 11.6.1
HBuilderX版本号： 3.3.11
示例代码：
操作步骤：
<template>
<view class="pageBox">
{{color}}
</view>
</template>
<script>
export default {
data() {
return {
color: '#FF0000'
}
}
}
</script>
<!-- -->
<style lang="scss" scoped >
.pageBox{
width: 100%;
min-height: 100vh;
color: v-bind(color);
box-sizing: border-box;
}
</style>
<template>
<view class="pageBox">
{{color}}
</view>
</template>
<script>
export default {
data() {
return {
color: '#FF0000'
}
}
}
</script>
<!-- -->
<style lang="scss" scoped >
.pageBox{
width: 100%;
min-height: 100vh;
color: v-bind(color);
box-sizing: border-box;
}
</style>预期结果：
<view class="pageBox" style="--57280228-color:#FF0000; --57280228-statusBarHeight:30px;">#FF0000</view>
<view class="pageBox" style="--57280228-color:#FF0000; --57280228-statusBarHeight:30px;">#FF0000</view>
实际结果：
<view class="pageBox" >#FF0000</view>
<view class="pageBox" >#FF0000</view>
bug描述：
vue3 css v-bind 小程序绑定的值未出现在标签上 导致颜色加载失败
manifest.json v3编译
14 个回复
最佳回复
DCloud_UNI_JBB
4.76 版本的 hx 测试正常，可升级到此版本
DCloud_UNI_Anne
已记录后续优化，已加分，感谢您的反馈！
snail_lt
你好，请问解决了吗，公司要转vue3，迫切需要使用这个属性，谢谢！
2022-05-25 09:53
aaha
你好，请问这个问题何时能够解决
2022-08-22 09:01
snail_lt
你好，解决了吗，vue3问题多吗？被这卡住了
zZZ1Ma
2022.07.29，小程序端依然BUG，CSS变量前面缺失 --数字前缀
aaha
2022.8.22 vue3中css里v-bind()仍然不生效[捂脸]
2***@qq.com
2022 / 9 / 10 还是未生效
小朋友 - 规范化广泛的
这个还没有解决吗
DCloud_UNI_FXY
https://github.com/dcloudio/uni-app/issues/3887
1***@139.com
HbuilderX 3.6.10.20221121-alpha 版本，
2022-11-25日，不行，用的vue3 ，<script setup>,编译到小程序
2***@qq.com - demoApp
uniapp太多缺点，烦死了
星海扬帆 - 星帆云海
当前版本在小程序上仍有这个问题
起風了
所以也只能降低版本或者想其他办法去把变量加到样式属性里面了
2023-08-31 10:21
星海扬帆
回复 起風了: 已找到办法，小程序的styleIsolation参数配置问题，在sfc中加一个script解决，配置shared或page-shared
<script>
export default {
options: { styleIsolation: 'page-shared' }
}
</script>
2023-08-31 14:59
起風了
回复 星海扬帆: 原来如此,有解决方案就好
2023-09-01 16:11
lihuifang
这都2023年了 这个还没有解决吗？？
比个迪克
麻痹 2024/4/10 还有这个问题，用vue3写的一肚子火
jiexiong - others
bug真多