uni-app 【报Bug】text v-if，导致class失效

uni-app 【报Bug】text v-if，导致class失效

操作步骤：

描述中

预期结果：

1

实际结果：

1

bug描述：

<text class="list-li-middle-text list-li-middle-text-bold" style="font-size: 32rpx;" v-if="xxx > 0">{{ xxx }}元</text>  
<text class="list-li-middle-text" style="font-size: 32rpx; color: #fe593d; font-weight: bold;" v-if="xxx == 0">xxxxx</text>

第一行text： list-li-middle-text-bold 加粗失效，去掉v-if class有效，在style标签也有效，唯独只要有v-if，那么class就失效
使用了scss

还有一个问题，
<view style="padding"><text>  这么写padding失效了？
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本 3.1.14
手机系统 Android
手机系统版本 Android 11
手机厂商 小米
手机机型 k30s
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 【报Bug】text v-if，导致class失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

我记得这个bug好像有人提过

更多关于uni-app 【报Bug】text v-if，导致class失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvueStyleCompiler 配置的是 uni-app 吗？如果是的话切换为 weex 试试

这是一个已知的 nvue 平台特定问题。在 nvue 中，text 组件使用 v-if 时确实可能导致部分样式失效，特别是字体粗细（font-weight）相关的样式。

解决方案：

  1. 优先使用内联样式：将 font-weight: bold 直接写在 style 属性中
<text class="list-li-middle-text" style="font-size: 32rpx; font-weight: bold;" v-if="xxx > 0">{{ xxx }}元</text>

  1. 改用 v-show：如果条件切换不频繁，可考虑使用 v-show 替代 v-if

  2. 使用 view 包裹：用 view 组件承载条件渲染，text 只负责文本显示

<view v-if="xxx > 0">
    <text class="list-li-middle-text list-li-middle-text-bold" style="font-size: 32rpx;">{{ xxx }}元</text>
</view>
回到顶部