<view style="background:{{curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff')}};color:{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000'}}" class="answer-item"> {{item.name}} </view> 转uniapp格式
时间: 2024-03-28 10:37:04 浏览: 16
下面是转换后的uniapp格式代码:
<view :style="'background:'+(curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff'))+';color:'+(curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000')" class="answer-item">
{{item.name}}
</view>
相关问题
<view class="answer-list"> <view class="answer" wx:for="{{curQuestion.answerList}}" wx:key="index" bindtap="answerClick" data-index="{{index}}"> <view style="background:{{curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff')}};color:{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000'}}" class="answer-item"> {{item.name}}</view> <view class="icon-box" wx:if="{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)}}"> <text wx:if="{{curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index}}" class="cuIcon-roundclosefill choose-fail"></text> <text wx:if="{{curQuestion.answerFlag && item.realFlag}}" class="cuIcon-roundcheckfill choose-success"></text> </view> </view> </view> 转uniapp写法
<view class="answer-list">
<view class="answer" v-for="(item, index) in curQuestion.answerList" :key="index" @tap="answerClick" :data-index="index">
<view :style="{background: curQuestion.answerFlag && item.realFlag ? '#1CC18D' : (curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C' : '#fff'), color: curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index) ? '#fff' : '#000'}" class="answer-item">
{{item.name}}
</view>
<view class="icon-box" v-if="curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)">
<text v-if="curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index" class="cuIcon-roundclosefill choose-fail"></text>
<text v-if="curQuestion.answerFlag && item.realFlag" class="cuIcon-roundcheckfill choose-success"></text>
</view>
</view>
</view>
style="background:{{curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff')}};color:{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000'}}" 代码解释
这是一个 Vue.js 模板中的行内样式,用于根据条件动态设置背景色和文字颜色。其中:
- `curQuestion.answerFlag` 表示当前问题的回答状态,为 `true` 则表示已回答;
- `item.realFlag` 表示当前选项是否为正确答案,为 `true` 则表示是正确答案;
- `curQuestion.curIndex` 表示当前选项的索引;
- `index` 表示遍历选项时的索引。
根据以上条件,如果当前选项是正确答案且问题已回答,则背景色为绿色,文字色为白色;如果当前选项不是正确答案且问题已回答且当前选项为最后一次选择的选项,则背景色为红色,文字色为白色;否则背景色为白色,文字色为黑色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)