美文网首页
小程序条件渲染

小程序条件渲染

作者: puxiaotaoc | 来源:发表于2018-08-23 19:37 被阅读4次
view.course-collection(@tap="jumpSecondaryPage('myCourses')")
      view.content.content_01(wx:if="{{!isLogin}}")
        image.img_01(src="../asserts/images/icon_bag_medium@2x.png")
        view.course-title 超值课包
        view.detail 提前看课表,免支付流程
        image.img_02(src="../asserts/images/Rectangle3@2x.png")
      view.content.content_02(wx:else)
          view.progress-num.inline-block {{consume}}/{{total}}  
          view.progress-detail.inline-block.remaining(wx:if="{{remaining == 0}}") 课包已用光     
          view.progress-detail.inline-block(wx:elif="{{ remaining >= 3}}") 已消耗课包
          view.progress-detail.inline-block.remaining(wx:else) 课包仅剩{{remaining}}次        
          view.supplementary-wrap.inline-block 
            image.supplementary-logo(src="../asserts/images/icon_bag_small@2x.png")
            view.supplementary.inline-block 补充课包
            image.goto(src="../asserts/images/Rectangle4@2x.png")
          view.progress-bar.gray-bar
          view.progress-bar.color-bar(style="width:{{(consume / total) * 100}}%;")
          // vue渲染
          // .progress-bar.color-bar(:style="{width: consume / total * 100 + '%'}")

相关文章

网友评论

      本文标题:小程序条件渲染

      本文链接:https://www.haomeiwen.com/subject/rtvpiftx.html