微信小程序 三元运算符 条件语句if和循环语句for（三目运算+hidden）

在微信小程序的官方文档中，将这两个语句归化在框架的视图层，分表叫条件渲染和类表渲染，其实他就是封装了这两条语句而已。

上图（循环语句if） 

1.它是通过在index.js中设置数据，然后再index.wxml中进行判断，首先上index.wxml的代码。

//微信是封装过if语句的，你只要在index.js中设置好值，然后就可以直接想这样拿来判断了，还有这是class=“view”效果放在判断语句中是没有效果的<view class="page"><view class="view" ><view wx:if="{{you}}">true</view><view wx:else>false</view></view>//三目运算，你可以比较一下这俩，上边判断true和false的方法，自己认为哪个简单用哪个<view class="view" ><block wx:if="{{you?true:false}}"><view>aa</view><view>bb</view></block><view>---------------------------</view>//其实挺简单的这样，相对于java和C++来说，这里直接写判断的数据就OK了<view class="view"><view  wx:if="{{diao>20}}">你很棒</view><view wx:elif="{{diao==15}}">还算是个中国人</view><view wx:else>只能去日本了</view></view><view>---------------------------</view>//如果你一个判断条件下有好几个view就用block标签，他算是个万能标签，什么属性都可以往里写，所以遇到复杂的视图时记得用它。<view class="view" ><block view class="view" wx:if="{{you}}"><view>你</view><view>很</view><view>叼</view></block><block wx:else><view>你</view><view>很</view><view>菜</view></block></view></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.index.js的代码，

var param={data:{you:true,diao:18,}}Page(param);
1
2
3
4
5
6
7
1
2
3
4
5
6
7

3.index.wxss的代码

.view{width: 100px;height: 50px;background-color: green;color: white;padding: 20px;margin-top: 10px}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

注意：if和hidden的区别 

二、循环语句for（其实在第8讲的button按钮中是有展示过的）

循环语句for呢，就是在index.js中把循环的数组，就是所有数据写进去，然后再index.wxml中进行逐一展示就行了。这里结合一下icon标签的属性

1.index.wxml

//因为要展示很多个icon，所以这里需要用到block标签。把index.js中写好的数组名字写在for的双括号中，然后在数组对应的属性下写进去item就ok了<view class="page">    <view style="display:inline-block">   <block  wx:for="{{iconColor}}">   <icon type="success" size="50"color="{{item}}"></icon>   </block>   </view>   <view>------------------------------------</view>  <view  style="display:inline-block">   <block  wx:for="{{iconType}}">   <icon size="50"type="{{item}}" color="green"></icon>   </block>   </view></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.index.js

var param={data:{iconSize:[20,30,40,50,60,70],iconColor:[ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'], iconType: [      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',      'info_circle', 'cancel', 'search', 'clear'    ]}}Page(param)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

如果是嵌套循环怎么办？ 
上代码

//重点在于给两个循环语句命名，然后去分别使用这两个语句 <view  style="display:inline-block">   <block  wx:for="{{iconType}}" wx:for-item="i">   <block  wx:for="{{iconColor}}"wx:for-item="j">   <icon type="{{i}}" size="50"color="{{j}}"></icon>   </block>   </block>   </view>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

上效果图 

摘要: 比wx:if作条件判断更优雅的写法

以地址列表中，默认地址是否选择为例。

先来看下wx:if的写法

<view class="set-default">    <!-- circle or success type -->    <icon class="icon" type="success_circle" wx:if="{{item.isDefault}}"></icon>    <icon class="icon" type="circle" wx:else></icon>    <text>默认地址</text></view>

从上面的代码可以看出，<icon>标签要重复写2次，包括class样式等属性，设定某个地址为默认地址时将会有绑定事件bindtap等，还会有有data-index等自定义属性，如果是swiper、scroll-view等组件还少不了写上current、scroll-y附加属性就更加抓狂了；要是<icon>标签里还包含其他标签块，那就成几何倍增加冗余代码了，就不可想象了。到时候用wx:if写预计会长成这样：

    <icon class="icon" bindtap="iconTapped" data-index="{{index}}" wx:if="{{item.isDefault}}" type="success_circle"></icon>    <icon class="icon" bindtap="iconTapped" data-index="{{index}}" wx:else type="circle"></icon>

再来对比看下三元运算符的写法：

<view class="set-default">    <!-- circle or success type -->    <icon class="icon" type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>    <text>默认地址</text></view>

与wx:if标签写法相比，显然更加简洁优雅。

由于小程序不能操作dom，三元运算符还有一个常用的使用场景是控件class样式输出，达到jQuery.addClass()的效果。例如：

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{provinceName}}</text>

以上书写形式参考了angular.js写法，在小程序中类比实现了。注意success_circle值要包裹在引号之中。小程序实际支持了三元运算符写法，只是文档上没有明说，比较遗憾。

wx:if文档出处：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html

源码下载：http://git.oschina.net/dotton/lendoo-wx，本文涉及代码存于/pages/address/list文件夹中。