<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>
1***@163.com
- 发布：2025-10-21 11:23
- 更新：2025-10-21 16:44
- 阅读：28
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： PC没问题
HBuilderX类型： 正式
HBuilderX版本号： 4.76
手机系统： Android
手机系统版本号： Android 12
手机厂商： realme
手机机型： 真我q3s
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
直接点击子元素（绿色区域）
直接点击子元素（绿色区域）
预期结果：
子元素改变样式
子元素改变样式
实际结果：
子元素新样式没有生效
子元素新样式没有生效
bug描述：
动态给元素节点绑定 class 问题，子元素样式不生效的问题。
这是BUG还是设计就是这样的呢。
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
你是 uniapp x 吗，我看你用到了 uts。但是 bug 信息里说的是 nvue 和 unapp。
如果是 uniappx，目前是设计如此，父元素的调整不会改变子元素的样式，目前暂不支持 web 中这种写法。你需要明确要改动的具体样式，也就是通知子元素、子组件改变了 class，从而实现子元素样式动态改变。
