注册登录

LwView

发布：2022-02-14 11:54
更新：2024-04-10 12:00
阅读：2363

【报Bug】vue3 小程序css v-bind() 未生效

分类：HBuilderX

bug已确认

产品分类： 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" >#FF0000</view>`

bug描述：

vue3 css v-bind 小程序绑定的值未出现在标签上导致颜色加载失败

manifest.json v3编译

2022-02-14 11:54 负责人:DCloud_UNI_GSQ 分享

12 个回复

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写的一肚子火

要回复问题请先登录或注册

【报Bug】vue3 小程序css v-bind() 未生效

示例代码：

`<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" >#FF0000</view>`

bug描述：

12 个回复

公告

相关问题

【报Bug】vue3 小程序css v-bind() 未生效

示例代码： <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" >#FF0000</view>

bug描述：

与内容相关的链接

12 个回复

公告

相关问题

示例代码：

`<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" >#FF0000</view>`