【uni-app】关于v-if和v-else-if的一个踩坑记录
<pw-swiper
class="main"
ref="swiper"
:list="subjectList"
:dataIndex="subjectIndex"
@change="swiperChange"
>
<template class="swiper-item" v-slot:default="{ item, index }">
<scroll-view scroll-y style="height: 100%; width: 100%;">
<block>
<view class="u-flex u-m-l-44 u-m-r-44">
<!-- 单选题部分 -->
<template v-if=" === 0 || === 1">
<u-radio-group
wrap
class="u-flex-col u-flex-1"
v-model=""
@change="OptionChange($event, 'radio', item, index)"
>
<view
class="question-option u-flex-col"
:class="{
correct: item.result && ~item.isAnswerStr.indexOf(option.tag),
wrong:
item.result &&
~item.userAnswer.indexOf(option.tag) &&
!~item.isAnswerStr.indexOf(option.tag)
}"
v-for="(option, index) in "
:key="index"
>
<u-radio
:name=""
:answer=""
:result=""
:disabled=" ? true : false"
mode="none"
>
<view
class="question-option-id u-flex u-row-center u-col-center"
slot="none"
>
<view
class=""
:style="{ 'font-size': + 'rpx' }"
>
{{ option.tag }}.
</view>
</view>
<view class="u-flex u-flex-1">
<view
class="u-flex-1"
:style="{ 'font-size': + 'rpx' }"
>
{{ option.msg }}
</view>
<view class="u-m-l-20">
<u-image
class=""
mode="heightFix"
width=""
height="30rpx"
:fade="false"
src="/static/question/icon/icon_correct.png"
v-show="
item.result &&
~item.isAnswerStr.indexOf(option.tag)
"
></u-image>
<u-image
class=""
mode="heightFix"
width=""
height="30rpx"
:fade="false"
src="/static/question/icon/icon_wrong.png"
v-show="
item.result &&
~item.userAnswer.indexOf(option.tag) &&
!~item.isAnswerStr.indexOf(option.tag)
"
></u-image>
</view>
</view>
</u-radio>
</view>
</u-radio-group>
</template>
<!-- 多选题部分 -->
<template v-if=" === 2">
<u-checkbox-group
wrap
class="u-flex-col u-flex-1"
shape="circle"
@change="OptionChange($event, 'checkbox', item, index)"
>
<view
class="question-option"
:class="{
select: !item.result && ~item.userAnswer.indexOf(option.tag),
correct: item.result && ~item.isAnswerStr.indexOf(option.tag),
wrong:
item.result &&
~item.userAnswer.indexOf(option.tag) &&
!~item.isAnswerStr.indexOf(option.tag)
}"
v-for="(option, index) in "
:key="index"
>
<u-checkbox
v-model=""
:name=""
:isAnswer="Boolean(Number())"
:result=""
:disabled=" ? true : false"
mode="none"
>
<view
class="question-option-id u-flex u-row-center u-col-center"
slot="none"
>
<view
class=""
:style="{ 'font-size': + 'rpx' }"
>
{{ option.tag }}.
</view>
</view>
<view class="u-flex u-flex-1">
<view
class="u-flex-1"
:style="{ 'font-size': + 'rpx' }"
>
{{ option.msg }}
</view>
<view class="u-m-l-20">
<u-image
class=""
mode="heightFix"
width=""
height="30rpx"
:fade="false"
src="/static/question/icon/icon_correct.png"
v-show="
item.result &&
~item.userAnswer.indexOf(option.tag) &&
~item.isAnswerStr.indexOf(option.tag)
"
></u-image>
<u-image
class=""
mode="heightFix"
width=""
height="30rpx"
:fade="false"
src="/static/question/icon/icon_wrong.png"
v-show="
item.result &&
~item.userAnswer.indexOf(option.tag) &&
!~item.isAnswerStr.indexOf(option.tag)
"
></u-image>
</view>
</view>
</u-checkbox>
</view>
<view class="u-flex-1 u-m-t-60" v-show="!">
<u-button type="primary" shape="circle" @click="OptionCommit()">
提交答案
</u-button>
</view>
</u-checkbox-group>
</template>
</view>
</block>
</scroll-view>
</template>
</pw-swiper>