uni-app 3.1版本动态class失效
uni-app 3.1版本动态class失效
# 测试信息
| 信息类别 | 详细信息 |
|----------------|-------------------|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 10.15.5 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.0 |
| 手机系统 | 全部 |
| 手机系统版本号 | IOS 14 |
| 手机厂商 | 苹果 |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
## 测试过的手机
所有的
## 操作步骤：
<p>这样写法已经失效了</p>
## 预期结果：
<p>这样写法已经失效了</p>
## 实际结果：
<p>这样写法已经失效了</p>
## bug描述：
:class="{‘xxxxx’: index == currentIndex}"
<p>这样写法已经失效了<br>
能不能不要搞人？升级前一堆BUG，升级后又是一堆BUG！！！！！！</p>
更多关于uni-app 3.1版本动态class失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
19 回复
回复 YXW: 不止这一个bug；像border-color不能使用rgba；flex布局的部分属性失效；nvue下的list组件数据源刷新导致样式错乱等等，一下就出来了；以前虽然有bug，但是直接影响不太大，这次是整个直接把项目渲染得一团糟了
回复 DCloud_UNI_GSQ: 官方有人？报 BUG 发帖快一个月也不见有回复 https://ask.dcloud.net.cn/question/115509?item_id=154591
<template>
<view>
<swiper class="banner-box" circular @change="swiperChange">
<swiper-item v-for="(item, index) in quote" :key="index">
<view @click="jumpTargetPage(item)">
<peak-image width="750" height="320" mode="aspectFill" :src="item.cover_url"></peak-image>
</view>
</swiper-item>
</swiper>
<view class="banner-indicate">
<view class="banner-indicate-dot" :class="{'banner-indicate-dot-select': index == currentIndex}" v-for="(item, index) in quote"
:key="index"></view>
</view>
</view>
</template>
<script>
export default {
props: {
quote: Array
},
data() {
return {
// 当前索引
currentIndex: 0
}
},
methods: {
// 滚动图改变展示
swiperChange: function(e) {
this.currentIndex = e.detail.current;
},
// 跳转至目标页
jumpTargetPage: function(item) {
let obj = item.target_object;
let type = item.target_type.value
this.$emit('jumpTarget', type, obj);
}
}
}
</script>
关于uni-app 3.1版本动态class失效的问题，这是一个已知的兼容性问题。在nvue页面中，动态class绑定确实存在一些限制。
解决方案：
- 可以使用三元表达式替代对象语法：
:class="index === currentIndex ? 'xxxxx' : ''"
- 或者改用计算属性：
computed: {
activeClass() {
return this.index === this.currentIndex ? 'xxxxx' : ''
}
}
- 也可以考虑使用内联样式绑定：
:style="index === currentIndex ? 'your-style' : ''"