uni-app 三元运算动态计算class，数据改变后不生效，不再动态计算

最新推荐文章于 2024-08-21 14:26:46 发布

微行

最新推荐文章于 2024-08-21 14:26:46 发布

阅读量2.8k

点赞数 4

分类专栏： web前端文章标签： uni-app 三元运算动态计算class

本文链接：https://blog.youkuaiyun.com/itlsq/article/details/124049187

版权

web前端专栏收录该内容

26 篇文章

订阅专栏

本文讲述了在uni-app中遇到的一个动态计算view class的bug，当数组list长度变化时，class并未实时更新。作者发现此问题在Vue环境下正常工作，但在uni-app环境下出现异常。最后，通过使用Vue的computed属性成功解决了这个问题，动态生成了正确的class名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个uni-app上使用三元运算符的问题，动态计算class，class名会根据数组的长度来决定是否显示‘active’，

<view class="footer" :class="list.length > 0 ? 'active' : ''">
  <van-button type="default">查询</van-button>
</view>

list初始长度为0，当list长度变化后，这里的动态class却不再重新计算，view上显示的class始终是‘footer’，而不是‘footer active’,也没摸清什么原因，这在vue上写是完全没问题的，用uni-app就遇到了这种现象，最后是通过computed动态计算class解决的。

解决办法

<view :class="getFooterClass">
  <van-button type="default">查询</van-button>
</view>

computed: {
  getFooterClass () {
    return this.list.length > 0 ? 'footer active' : 'footer'
  }
}