1***@163.com

发布：2025-10-21 11:23
更新：2025-10-21 16:44
阅读：157

【报Bug】动态给元素节点绑定 class 问题，子元素样式不生效的问题

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： PC没问题

HBuilderX类型：正式

HBuilderX版本号： 4.76

手机系统： Android

手机系统版本号： Android 12

手机厂商： realme

手机机型：真我q3s

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
  <view class="is-today" :class="{ 'is-selected': test() }">  
        <view class="box" @click="handle()">点击我变黄1</view>  
    </view>  
</template>  

<script lang="uts" setup>  
    import { ref } from "vue";  
    const active = ref(false);  
    function handle() {  
        active.value = true;  
    }  
    function test() {  
        return active.value;  
    }  
</script>  

<style>  
    .is-today {  
        background: red;  
        padding: 200rpx;  
    }  
    .is-today .box {  
        height: 500rpx;  
        background: green;  
    }  
    .is-selected {  
        background: yellow;  
    }  
    .is-selected .box {  
        height: 300rpx;  
        background: salmon;  
    }  
</style>

操作步骤：

直接点击子元素（绿色区域）

预期结果：

子元素改变样式

实际结果：

子元素新样式没有生效

bug描述：

动态给元素节点绑定 class 问题，子元素样式不生效的问题。

这是BUG还是设计就是这样的呢。

2025-10-21 11:23 负责人:无分享

1 个回复

[已删除]

你是 uniapp x 吗，我看你用到了 uts。但是 bug 信息里说的是 nvue 和 unapp。

如果是 uniappx，目前是设计如此，父元素的调整不会改变子元素的样式，目前暂不支持 web 中这种写法。你需要明确要改动的具体样式，也就是通知子元素、子组件改变了 class，从而实现子元素样式动态改变。

2025-10-21 16:44 分享

1***@163.com (作者)

因为发布问答的地方没有 uniappx 的选项，所以只能选uniapp。

OK，既然是设计如此那就没问题了

2025-10-22 13:51

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

【报Bug】动态给元素节点绑定 class 问题，子元素样式不生效的问题

操作步骤：

直接点击子元素（绿色区域）

预期结果：

子元素改变样式

实际结果：

子元素新样式没有生效

bug描述：

1 个回复

公告

相关问题

【报Bug】动态给元素节点绑定 class 问题，子元素样式不生效的问题

操作步骤： 直接点击子元素（绿色区域）

预期结果： 子元素改变样式

实际结果： 子元素新样式没有生效

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

直接点击子元素（绿色区域）

预期结果：

子元素改变样式

实际结果：

子元素新样式没有生效