【报Bug】style 字符串拼接出现出现问题

分类：uni-app

bug反馈不是bug

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macoS 26.1

HBuilderX类型：正式

HBuilderX版本号： 4.85

手机系统： HarmonyOS NEXT

手机系统版本号： HarmonyOS 5.1.1

手机厂商：华为

手机机型： HUAWEI Pocket 2

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

如下源码会导致 v-show 失效：

<template>  
    <view>  
        <view class="dialog_nav" :style="'top:' + navH + 'rpx;'" v-show="currentPage">  
            <text>内容</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                navH: 100,  
                currentPage: false  
            };  
        }  
    };  
</script>

如下代码符合预期：

<template>  
    <view>  
        <view class="dialog_nav" :style="{ top: `${navH}rpx` }" v-show="currentPage">  
            <text>内容</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                navH: 100,  
                currentPage: false  
            };  
        }  
    };  
</script>

预期结果：

style 支持字符串拼接

实际结果：

无

bug描述：

如下源码会导致 v-show 失效：

<template>  
    <view>  
        <view class="dialog_nav" :style="'top:' + navH + 'rpx;'" v-show="currentPage">  
            <text>内容</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                navH: 100,  
                currentPage: false  
            };  
        }  
    };  
</script>

如下代码符合预期：

<template>  
    <view>  
        <view class="dialog_nav" :style="{ top: `${navH}rpx` }" v-show="currentPage">  
            <text>内容</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                navH: 100,  
                currentPage: false  
            };  
        }  
    };  
</script>

2025-12-01 17:49 负责人:DCloud_UNI_OttoJi 分享

1 个回复

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

我使用下面代码，运行到 vue3 + HBuilderX 4.87 点击按钮，弹窗切换正常

<template>  
    <view class="box">  
        <button @click="toggle1">toggle {{currentPage}}</button>  
        <view class="dialog_nav" :style="'top:' + navH + 'rpx;'" v-show="currentPage">  
            <text>内容</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                navH: 200,  
                currentPage: false  
            };  
        },  
        methods: {  
            toggle1() {  
                this.currentPage = !this.currentPage  
            }  
        }  
    };  
</script>  

<style>  
    .box {  
        position: relative;  
        height: 90vh;  
    }  

    .dialog_nav {  
        position: absolute;  
        width: 200px;  
        height: 200px;  
        border: 1px solid red;  
        top: 50%;  
        left: 50%;  
        transform: translate(-50%, -50%);  
        background-color: rgba(0, 0, 0, 0.5);  
    }  
</style>

2025-12-01 19:44 分享

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

【报Bug】style 字符串拼接出现出现问题

预期结果：

style 支持字符串拼接

实际结果：

无

bug描述：

1 个回复

公告

相关问题

【报Bug】style 字符串拼接出现出现问题

预期结果： style 支持字符串拼接

实际结果： 无

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

style 支持字符串拼接

实际结果：

无