1、条件渲染
条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：
- 使用
wx:if、wx:elif、wx:else属性组 - 使用
hidden属性
<view wx:if="{{num === 1}}"> 1 </view>
<view wx:elif="{{num === 2}}"> 2 </view>
<view wx:else> 3…… </view><view hidden="{{flag}}"> 1 </view>
wx:if 和 hidden 二者的区别：
wx:if：当条件为 true 时将内容渲染出来，否则元素不会进行渲染，通过移除/新增节点的方式来实现hidden：当条件为 true 时会将内容隐藏，否则元素会显示内容，通过display样式属性来实现的
2、列表渲染
2.1 基本使用
列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上
- 只需要在组件上使用
wx:for属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件 - 默认数组当前项的变量名默认为
item - 默认数组的当前项的下标变量名默认为
index - 在使用
wx:for对数组进行遍历的时候，建议加上wx:key属性，如不提供wx:key，会报一个 warning， 如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。 wx:key的值以两种形式提供：- 字符串：代表需要遍历的 array 中
item的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变 - 保留关键字
*this代表在 for 循环中的item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用
- 字符串：代表需要遍历的 array 中
<!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view><!-- 如果渲染的是对象，item：对象属性的值，index：对象属性 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view><view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view><!-- 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
2.2 修改默认下标和变量名
如果需要对默认的下标和变量名进行修改，可以使用 wx:for-item 和 wx:for-index
- 使用
wx:for-item可以指定数组当前元素的变量名 - 使用
wx:for-index可以指定数组当前下标的变量名
<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">{{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>
)
