说到条件，相比大家都是很熟悉的了，要么符合什么什么条件，要么不符合什么什么条件，在我们的编程里就是if else，从if开始到else结束。比如我们说小明的考试成绩出来了，如果分数大于60分及格，不然就是不及格，那么我们的条件语句就可以写成下面这个样子。

if(score > 60){
	及格
}else{
	不及格
}

同样在微信小程序也是有条件渲染的，下面就来具体操作一下。

条件渲染

我们先制定一个规则，小明考试成绩出来了，如果在80分及以上是红分，如果小于60分是不及格，如果在60分到79分之间就是及格。

微信小程序是不能直接使用if else进行判断的，要加上wx前缀比如if就是wx:if，else就是wx:else，else if要注意是这个样子的wx:elif；注意是 e l i f。

接下来我们就可以来编写我们的条件约束了：

首先不及格，条件是分数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;
}

小程序的条件渲染和列表渲染到这里就结束了。很简单，也很好理解。

一、条件渲染

（一）wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块。

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

也可以用wx:elif 和 wx:else来添加else判断：

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

演示：
如果type的初始值为1，则页面渲染为“男”


如果type初始值为2，页面渲染为2

其他值，页面渲染为保密

（二）结合使用wx:if

可以通过一次性控制多个组件的显示与隐藏，并不是一个组件，只是一个包裹性质的容器，不会在页面做任何渲染。

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

true为显示，false为隐藏。

（三）hidden

直接使用hidden="{{condition}}"也能控制元素的显示与隐藏，条件为true为隐藏，条件为false为显示。

注：wx:if 和hidden的区别
1、wx:if以动态创建和移除的方式，控制元素的显示与隐藏；hidden用切换样式的方法（display：none/block;）控制元素的显示与隐藏。
需要频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx:if，搭配wx:if/wx:else进行展示与隐藏的切换。

<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>
<view wx:if="{{flag}}">这是使用wx:if控制的元素</view>

显示：

二、列表渲染

（一）wx:for

通过wx:for可以根据指定的数组，循环渲染重复的结构组件。
wxml:

<view wx:for="{{arr1}}">
    索引是：{{index}}, 当前项是：{{item}}
</view>

js:

data: {
        type:2,
        flag:true,
        arr1:['苹果','香蕉','梨']
    },

（二）wx:key

建议为渲染出来的列表项指定唯一的Key值，从而提高代码效率。

wxml:

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

js:

data: {
        type:2,
        flag:true,
        arr1:['苹果','香蕉','梨'],
        userList:[
            {id:1,name:'张三'},
            {id:2,name:'李四'},
            {id:3,name:'王五'}
        ]
    },

目录

WXML 模板语法 - 条件渲染

🍊1. wx:if

🍋2. 结合 使用 wx:if

🍉3. hidden

🍓4. wx:if 与 hidden 的对比

WXML 模板语法 - 列表渲染

🥭1. wx:for

🍍2. 手动指定索引和当前项的变量名

🥝3. wx:key 的使用

WXML 模板语法 - 条件渲染

🍊1. wx:if

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

也可以用 wx:elif 和 wx:else 来添加 else 判断：

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

js：

Page({

data: {
  type:1
},


})

因为type的值为1，所以：

 

例如：

WXML:

<view wx:if="{{type==1}}">主色调</view>
<view wx:elif="{{type==2}}">普通按钮</view>
<view wx:else>无</view>

<button type="primary" size="mini" wx:if="{{type==1}}">主色调</button>
<button size="mini" wx:if="{{type==2}}">普通按钮</button>

JS和上面的一样

效果：

 

🍋2. 结合 <block> 使用 wx:if

如果要 一次性控制多个组件的展示与隐藏 ，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
<view>view3</view>
</block>

 

注意： <block> 并不是一个组件 ，它只是一个包裹性质的容器， 不会在页面中做任何渲染。

🍉3. hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：

<view hidden="{{false}}">hidden</view>

 hidden 中  false  表示不隐藏组件

true表示隐藏组件

🍓4. wx:if 与 hidden 的对比

① 运行方式不同

wx:if 以 动态创建和移除元素 的方式，控制元素的展示与隐藏

hidden 以 切换样式 的方式（display: none/block;），控制元素的显示与隐藏

② 使用建议

频繁切换 时，建议使用 hidden

控制条件复杂 时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

WXML 模板语法 - 列表渲染

🥭1. wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{arry}}">
索引是：{{index}},item项是:{{item}}
</view>

JS:

Page({

data: {
  arry:['橘子','苹果','香蕉']
}


})

默认情况下，当前循环项的 索引 用 index 表示； 当前循环项 用 item 表示。

效果：

 

🍍2. 手动指定索引和当前项的变量名

使用 wx:for-index 可以指定 当前循环项的索引 的变量名

使用 wx:for-item 可以指定 当前项 的变量名

示例代码如下：

🥝3. wx:key 的使用

<view wx:for="{{userList}}" wx:key="id">
{{item.name}}
</view>

 JS:

Page({

data: {
 userList:[
   {id:1,name:'热'},
   {id:2,name:'爱'},
   {id:3,name:'编'},
   {id:4,name:'程'},
   {id:5,name:'的'},
   {id:6,name:'小'},
   {id:7,name:'白'},
   {id:8,name:'白'},
 ]
}


})

效果：