条件渲染

在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

示例:

// page.js
Page({
    data: {
        show: true,
        score: 150
    }
})
<view>
    <view wx:if="{{show}}">
      我是if语句控制展示的内容
    </view>

    <!-- 
       90 到100 优秀
       70 到 89 良好
       60 到 69 及格
       0  到 59 不及格
     -->
     <view wx:if="{{score >=90 && score <= 100}}">
      优秀
     </view>
     <view wx:elif="{{score >=70 && score <90}}">
      良好
     </view>
     <!-- elif 就是else if的缩写 -->
     <view wx:elif="{{score >= 60 && score <70}}">
      及格
     </view>
     <view wx:elif="{{score >=0 && score < 60}}">
      不及格
     </view>
     <view wx:else>
       没有这种分数
     </view>
</view>

results matching ""

    No results matching ""