条件渲染
在框架中,使用 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>