wx:if
在小程序中，使用wx：if=“{{ condition }}”来判断是否需要渲染该代码块
<view wx:if="{{condation}}">你好帅</view>
也可以用wx：if和wx：else来添加else判断：
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 2}}">保密</view>
结合使用wx：if
如果要一次性控制多个组件的展示和隐藏，可以使用一个**标签**将多个组件包装起来，并在标签上使用wx：if控制属性，示例如下：
<block wx:if="{{false}}"><view wx:if="{{type === 1}}">男</view><view wx:elif="{{type === 2}}">女</view><view wx:else="{{type === 2}}">保密</view>
</block>
注意：block并不是一个组件，他只是i一个包裹性质的容器，不会在页面有任何渲染。
hidden
在小程序中，直接使用hidden=“{{condition}}” 也可以控制元素的显示和隐藏：
<view hidden="{{flag}}">条件为true 隐藏，条件为false显示</view>
等于true隐藏元素，值为false隐藏元素
wx:if 与 hidden的对比
- 运行方式不同wx：if是进行dom的移除进行显示隐藏操作
- hidden是设置display：none，控制元素的显示和隐藏
使用建议：在频繁切换的时候，使用hidden
控制条件复杂时，建议使用wx：if搭配wx：elif、wx：else进行展示和隐藏
列表的渲染
wx：for
通过wx：for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
<view wx:for="{{lists}}">
{{index}}.{{item}}
</view>
手动指定当和当前项变量名
使用：wx：for-index可以指定当前循环项的索引的变量名
使用：wx：for-item可以指定当前项的变量名
<view wx:for="{{lists}}" wx:for-index="idx" wx:for-item="itemName">索引是：{{idx}} 当前项是：{{itemName}}
</view>
wx:key 的使用
类似于Vue列表渲染中的Key，小程序在实现列表渲染的时候，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：
<view wx:for="{{lists}}" wx:key="index">
{{item}}
</view>
