代码结构混乱问题

classlistType活动列表:nbsp;nbsp;nbsp;/spanel-select

v-modelselectOption

changebeforPitchOn()el-optionv-foritem

options:keyitem.value:labelitem.label:valueitem/el-option/el-select!--

el-button

clicktoPersonal切换为个性化学习/el-button

--/div/divbrdiv

v-showpreparedActivitiesBtnIsShowel-popover

placementbottom

v-showpreparedActivitiesBtnIsShowdiv

v-ifpreparedActivitiesIsShow点击章节名称即可变成待执行的活动/divdiv

styleoverflow-y:

{{item.chapter_title}}/el-button/div/divdiv

v-if!preparedActivitiesIsShow{{preparedActivitiesTitle}}/div/divdiv

v-show!popoverIsShow请在倒数10秒前使用此功能/divtemplate

#referenceel-button

v-showpreparedActivitiesBtnIsShow待执行活动颗粒/el-button/template/el-popover/divdiv

size23px

v-ifcompletedActiveIsShow已经结束的三个章节如下/divdiv

v-foritem

clickHoverClick(item.chapter_id)

{{item.chapter_title}}/el-button/div!--

button

v-if!completedActiveIsShow没有进行过的课程呢~/divtemplate

#referencespan

}}/span/template/el-popover/divdiv

classremain_time

title当前活动剩余时间van-count-downrefcountDownfinishtimeFinish:timetimeformatmm:sstimeDataTimeDatachangechange//divdiv

classdoing!--

--el-buttontypeprimaryroundv-showbreak_btnclassbreak_timestylevertical-align:

65%!--

--br/van-count-downrefbreakfinishbreakFinish:timebreak_timeformatmm:sstimeDataBreakTimeDatachangebreakchange/span分钟后继续开始/span/el-buttonel-icon

size48px

v-if!dialogStatuslabel请选择课程暂停时长/labelel-radio-group

v-modelreadsel-radio

changesetTimeData5分钟/el-radioel-radio

:label600000

changesetTimeData10分钟/el-radioel-radio

:label1

--el-input-numberv-modelreadsValue:min1sizesmallcontrols-positionrightchangehandleChange/分钟/el-radio-group!--

el-radio-group

v-ifdialogStatus请选择课程暂停时长/label/el-popover/el-iconel-icon

size48px

}}/span/template/el-popoverdivel-tooltipcontent学情展示页按钮raw-contentel-icon

:size30Histogram

//el-icon/el-tooltip/div/divdiv

classconfig!--

v-ifnextActiveIsShow即将进行的三个章节/divdiv

v-foritem

clickHoverClick(item.chapter_id)

{{item.chapter_title}}/el-button/div!--

button

v-if!nextActiveIsShow课程已经结束了~/divtemplate

#referencespan

}}/span/template/el-popover/div/divbrbrbrdiv

classfrdivstudyInfo

这里使用的时候用了三个v-if使用的却是同一个变量。

虽然说这样写在功能上没有问题但是却无法体现这几个部分的相关性实现功能固然重要但是代码的可读性也必须考虑。

前面添加的一个推课状态的小标识没有对齐。

虽然对功能没有影响但是效果很差很不美观。

问题一

使用v-if和v-else进行逻辑判断将上面的两个逻辑判断合并

div

clickHoverClick(item.chapter_id){{item.chapter_title}}/el-button/div

div