uni-app vue3 nvue项目在app上动态类名的子元素的样式会失效

uni-app vue3 nvue项目在app上动态类名的子元素的样式会失效

示例代码：

<template>  
    <view>  
        <view v-for="item in 5" :class="[{'active':active == item}]" @click="active = item">  
            <text class="item_text">{{ item }}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                active:1  
            }  
        }  
    }  
</script>  

<style scoped>  
    .active {  
        border:2rpx solid red;  
    }  
    .active .item_text{  
        color:red;  
    }  
</style>

操作步骤：

无

预期结果：

动态样式设置子元素生效

实际结果：

动态样式设置子元素不生效

bug描述：

vue2项目，现在改vue3，切换后，在app上发现动态类名的子元素的样式是不生效的，详细查看代码实例,想要通过.active .item_text,这样动态修改item_text样式是失效的，如下图所示，正常字体跟着边框都是红色的。

示例图片

示例图片


更多关于uni-app vue3 nvue项目在app上动态类名的子元素的样式会失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

确实不生效 只能分开写了给text的class也加上判断 nvue好像都不维护了

更多关于uni-app vue3 nvue项目在app上动态类名的子元素的样式会失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


害，自己写的组件还好，问题是他那个uni-ui里面也是这样样式，很多是失效的，怎么改？

这是一个 nvue 样式渲染的已知问题。在 nvue 中，样式选择器的支持与 Web 不同，子选择器（如 .active .item_text）在动态类名场景下可能无法正确应用。

解决方案：

  1. 直接为子元素绑定类名
<template>
    <view>
        <view v-for="item in 5" :class="[{'active':active == item}]" @click="active = item">
            <text :class="['item_text', {'active_text': active == item}]">{{ item }}</text>
        </view>
    </view>
</template>

<style scoped>
.active {
    border: 2rpx solid red;
}
.active_text {
    color: red;
}
</style>
  1. 使用样式继承 如果可能，将颜色样式直接定义在父元素上，利用继承特性：
.active {
    border: 2rpx solid red;
    color: red;
}
  1. 使用条件渲染 在特定条件下完全重新渲染子元素：
<text class="item_text" :style="{color: active == item ? 'red' : ''}">{{ item }}</text>
回到顶部