微信小程序开发（五）小程序条件渲染和列表渲染
说到条件，相比大家都是很熟悉的了，要么符合什么什么条件，要么不符合什么什么条件，在我们的编程里就是if else，从if开始到else结束。比如我们说小明的考试成绩出来了，如果分数大于60分及格，不然就是不及格，那么我们的条件语句就可以写成下面这个样子。
if(score > 60){
及格
}else{
不及格
}
条件渲染
我们先制定一个规则，小明考试成绩出来了，如果在80分及以上是红分，如果小于60分是不及格，如果在60分到79分之间就是及格。
接下来我们就可以来编写我们的条件约束了：
首先不及格，条件是分数score小于60分：
<view wx:if="{
{score < 60 }}"> 不及格</view>
然后红分，条件是分数在80及以上的分数：
<view wx:elif="{
{score >= 80 }}"> 红分</view>
最后就还剩下60分到79分的及格：
<view wx:else="{
{score >= 80 }}"> 及格</view>
先输入一下80分看一下效果，我们可以看到显示的是红分：
我们在输入一个不及格的分数看一下效果：
最后输入一个及格的分数：
三个分数对应三个结果，说明我们的条件语句没有写错。
这里额外提一点，小程序的判断一个对象是否为空，使用的是==’’，注意的是等号后面不是双引号""而是单引号‘’这里也举个例子：
我们判断小明的名字是否为空：
<view wx:if="{
{name !== }}">我有名字叫:{
{
name}}</view>
<view wx:else>我没有名字</view>
我们现在data里面声明一个name，然后给他一个空值，来看一下效果：
data: {
score:70,
name:""
},
这里名字为空，走了else
我们再给data里面的name设置一个值，比如叫小明，这里就走了if
小程序的条件渲染就这么多了，其实也很简单明了，如果符合if里面的条件就执行if里面的操作，不然就执行else里面的操作。
列表渲染
我们知道现在很多市面上的APP都有很多列表数据，但是那么多列表数据我们不可能每一条数据就在wxml文件里面手动添加一个view去显示，这个不现实，也不利于修改和维护；所以这就要用到小程序的列表渲染，列表渲染可能不好理解，其实就是通过for循环来循环展示数据。
操作步骤： 1.首先在页面onLoad回调里面创建一个list的数据并添加，但是这里添加的时候要注意，前面说到给data赋值的时候是this.setData(对象名)，但是我们现在创建是数据是一个集合，不能直接set到data里面去，因为data只能接收一个对象，所以我们要通过{}的形式进行赋值，我们现在data里面创建一个数据源进行接收：
data: {
//创建集合数据并初始化
list:[]
},
2.在onLoad里面创建模拟数据并set到data里面去：
onLoad: function (options) {
var dataList = [{
img:"../../images/code-cloud-callback-config.png",
name:"小明"
},{
img:"../../images/code-db-inc-dec.png",
name:"小明2"
},{
img:"../../images/code-db-onAdd.png",
name:"小明3"
},{
img:"../../images/code-db-onQuery.png",
name:"小明4"
}]
/**
* 给data添加数据
* data传入的需要是一个对象，不能直接传list this.setData(dataList) 是不允许的
* 传入list需要通过以下方法
*/
this.setData({
list:dataList
})
},
3.我们在控制台的AppData中就可以看到data中list的数据了：
4.接下来回到index.wxml文件，先创建一个view代表整个list，也就是整个模块，然后在创建一个block，用block来包裹集合里面的子项，也就是item，然后在block执行for循环操作；最后在block里面创建一个view，这一个view就是一个item，item里面包含一张图片、一个名字、以及当前item的下标索引：
<!--miniprogram/pages/index/index.wxml-->
<text>小程序条件渲染和列表渲染</text>
<view class="list">
<!-- block包裹住item
wx:for="{
{list}}" list就是data里面的数据源
wx:for-item="item" 定义item的变量名，我们要获取list数据源中item的值就要通过变量名去获取，比如img就是item.img
wx:for-index="itemId" 定义item索引的变量名，在小程序中item索引有一个默认的变量名index
-->
<block wx:for="{
{list}}" wx:for-item="item" wx:for-index="itemId">
<view class="item">
<view class="item_img">
<image src="{
{item.img}}"></image>
</view>
<view class="item_name">name:{
{
item.name}}</view>
<view class="item_index">index:{
{
itemId}}</view>
</view>
</block>
</view>
5.这里就可以查看最终效果了：
index.wxss文件的代码很简单，随便写了一个样式，还是贴一下吧：
/* miniprogram/pages/index/index.wxss */
.list{
display: flex;
padding: 0 30rpx;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.item{
width: 48%;
}
.item img{
width: 100%;
height: 100rpx;
}
小程序的条件渲染和列表渲染到这里就结束了。很简单，也很好理解。