咚咚咚咚队长
咚咚咚咚队长
  • 发布:2020-10-31 18:57
  • 更新:2020-11-02 17:25
  • 阅读:4734

uni-app 动态绑定class不生效

分类:uni-app

动态绑定class有时候生效,有时候不生效,是我哪里写的有问题么

复制代码        <view  
          v-for="(item, index) in question.answer" :key="index"  
          class="list-item"  
          :class="{  
            'correct': correctIndex === index,  
            'selected': selectIndex === index  
          }"  
          @tap="selectAnswer(item, index)"  
        >{{item}}</view>
复制代码selectAnswer(selectAnswer, selectIndex) { // 选择答案  
      const { answer: list, info: { fan } } = this.question  
      const correctIndex = list.findIndex(v => v === fan)  // 获取正确答案下标  

      if (selectAnswer === fan) {  // 回答正确  
        this.correctIndex = correctIndex  
        this.correct = ++this.correct  

      } else {  // 回答错误  
        this.correctIndex = correctIndex  
        this.selectIndex = selectIndex  
      }  
    }
2020-10-31 18:57 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

失效时:

  1. 运行环境
  2. IDE版本号
  3. 是否报错
  • 咚咚咚咚队长 (作者)

    data里面selectIndex默认是空字符串,当我选择第一个的时候,this.selectIndex = 0,但是不会触发class,需要把data里面的selectIndex默认是null才行,不知道为什么

    2020-11-03 16:26

8***@qq.com

8***@qq.com

用二元表达式判断试一下

复制代码        <view    
          v-for="(item, index) in question.answer" :key="index"    
          class="list-item"    
          :class="{    
            correctIndex === index ?  'correct' : '' ,    
            selectIndex === index ? 'selected' : ''    
          }"    
          @tap="selectAnswer(item, index)"    
        >{{item}}</view>
  • 咚咚咚咚队长 (作者)

    data里面selectIndex默认是空字符串,当我选择第一个的时候,this.selectIndex = 0,但是不会触发class,需要把data里面的selectIndex默认是null才行,不知道为什么

    2020-11-03 16:26

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容