首页 > Vue,v-if条件渲染,这个逻辑有点长。

Vue,v-if条件渲染,这个逻辑有点长。

这个模板的逻辑能用vue复写一套不?或者写一个思路demo。

<notempty name="list">
        <div class="class-info-title">
            <h4 style="width:100%;"><em>目标: </em><span>{$detail['target']}</span></h4>
            <h4><em>学习进度: </em><div class="point"><span class="point-child" style="width:{$progress.point}%"></span></div><span>{$progress.point}%</span></h4>
            <h4 class="wh40"><em>学时:</em><span>{$detail.classes}</span></h4>
        </div>
    <volist name="list" id="vo" key="k">

        <div class="class-info-control">
            <h3>{$k}.{$vo.name}</h3>
            <ul class="control-play">
                <volist name="vo['partlist']" id="v">
                    <switch name="v.type">

                        <case value="6">
                            <li>
                                <em class="icons icons-liveplay icons-control-liveplay"></em>
                                    <if condition="$assign eq 1 && $v.listentest eq 1 " >
                                        <a target="_blank" href="/course/playtask/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                            <elseif condition="$assign eq 0 "/>
                                            <a target="_blank" href="/class/play/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                                <else />
                                                <a target="" href="javascript:void(0)">{$v.name}
                                    </if>
                                    <if condition="$v.status eq 2">
                                        <span class="control-down"><em class="icons icons-ok icons-class-ok"></em>已完成</span>
                                        <else />
                                        <if condition="$v.listentest eq 1 && $assign eq 1" >
                                            <span class="control-down"><em class="icons icons-class-ok"></em>免费试听</span>
                                            <else />
                                            <span class="control-down"><em class="icons icons-class-ok"></em>去学习</span>

                                        </if>
                                    </if>
                                    <span class="control-down">
                                            <if condition="$v.liveStatus eq 1">
                                                查看回放
                                                <elseif condition="$v.liveStatus eq 2"/>
                                                暂无回放
                                                <elseif condition="$v.liveStatus eq 3"/>
                                                直播中&emsp;
                                                <elseif condition="$v.liveStatus eq 4"/>
                                                已预约&emsp;
                                                <elseif condition="$v.liveStatus eq 5"/>
                                                未预约&emsp;
                                            </if>
                                    </span>
                                    <span class="liveplay-time"><?php echo getTime($v['gl_live_id']);?></span>
                                </a>
                            </li>
                        </case>

                        <case value="8">
                            <li>
     
                                <em class="icons icons-works icons-control-liveplay"></em>
                                <if condition="$assign eq 1 && $v.listentest eq 1 " >
                                    <a target="_blank" href="/course/playtask/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                    <elseif condition="$assign eq 0 "/>
                                    <a target="_blank" href="/class/play/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                    <else />
                                    <a target="" href="javascript:void(0)">{$v.name}
                                </if>
                                <if condition="$v.status eq 2">
                                    <span class="control-down"><em class="icons icons-ok icons-class-ok"></em>已完成</span>
                                    <else />
                                    <if condition="$v.listentest eq 1 && $assign eq 1" >
                                        <span class="control-down"><em class="icons icons-class-ok"></em>免费试听</span>
                                        <else />
                                        <span class="control-down"><em class="icons icons-class-ok"></em>去学习</span>
                                    </if>
                                </if>
                                </a>
                            </li>
                        </case>
                        <case value="3">
                            <li>
                                <em class="icons icons-works icons-control-exercise"></em>
                                <if condition="$assign eq 1 && $v.listentest eq 1 " >
                                    <a target="_blank" href="{:C('tiku')}/Examine/createpaper/pid/{$v['partpath']}/etype/3/sub/{$subject.linkmark}">{$v.name}
                                        <elseif condition="$assign eq 0 "/>
                                        <a target="_blank" href="{:C('tiku')}/Examine/createpaper/pid/{$v['partpath']}/etype/3/sub/{$subject.linkmark}">{$v.name}
                                            <else />
                                            <a target="" href="javascript:void(0)">{$v.name}
                                </if>
                                    <span class="control-down">
                                                  <switch name='v.status'>
                                                      <case value='1'>继续考试</case>
                                                      <case value='2'>重新考试</case>
                                                      <default/>开始考试
                                                  </switch>
                                    </span>


                                </a>
                            </li>

                        </case>
                        <case value="9">
                            <li>
                                <em class="icons icons-works icons-control-note"></em>
                                <if condition="$assign eq 1 && $v.listentest eq 1 " >
                                    <a target="_blank" href="/course/playtask/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                        <elseif condition="$assign eq 0 "/>
                                        <a target="_blank" href="/class/play/cid/{$detail.id}/pid/{$v.id}">
                                            {$v.name}
                                            <else />
                                            <a target="" href="javascript:void(0)">{$v.name}
                                </if>
                                <if condition="$v.status eq 2">
                                    <span class="control-down"><em class="icons icons-ok icons-class-ok"></em>重新考试</span>
                                    <else />
                                    <if condition="$v.listentest eq 1 && $assign eq 1" >
                                        <span class="control-down"><em class="icons icons-class-ok"></em>继续考试</span>
                                        <else />
                                        <span class="control-down"><em class="icons icons-class-ok"></em>开始考试</span>
                                    </if>
                                </if>
                                </a>
                            </li>

                        </case>

                        <default />


                        <li>
                            <em class="icons icons-play icons-control-play"></em>
                            <if condition="$assign eq 1 && $v.listentest eq 1 " >
                                <a target="_blank" href="/course/playtask/cid/{$detail.id}/pid/{$v.id}">{$v.name}
                                    <elseif condition="$assign eq 0 "/>
                                    <a target="_blank" href="/class/play/cid/{$detail.id}/pid/{$v.id}">
                                        {$v.name}
                                        <else />
                                        <a target="" href="javascript:void(0)">{$v.name}
                            </if>
                            <if condition="$v.status eq 2">
                                <span class="control-down"><em class="icons icons-ok icons-class-ok"></em>已完成</span>
                                <else />
                                <if condition="$v.listentest eq 1 && $assign eq 1" >
                                    <span class="control-down"><em class="icons icons-class-ok"></em>免费试听</span>
                                    <else />
                                    <span class="control-down"><em class="icons icons-class-ok"></em>去学习</span>
                                </if>
                            </if>
                            </a>
                        </li>
                    </switch>

                </volist>

            </ul>
        </div>
    </volist>
<else />
    <div class="no-one">此课程没有课件</div>
</notempty>

vue有computed,可以在js中计算后,返回计算结果
html里面v-if="计算结果"就可以了。


如果不需要额外参数,就用computed就可以了;如果需要参数,干脆封装成一个函数嘛~

【热门文章】
【热门文章】