条件判断和列表渲染

条件判断

<text>数据 age:16 </text>
<view wx:if="{{age>18}}">大于18</view>
<view wx:elif="{{age>=14}}">14-18</view> // 只展示这里
<view wx:else>小于14</view>
<view hidden="{{flag}}">hidden为真隐藏</view>

wx:if和 hidden 的区别 ：hidden 就和 Vue 中 v-show 一样控制的是css属性display , v- if 如果后面对应的是false 那么该组件根本就没有创建 ，如果显示和隐藏的切换频率非常高还是选择hidden好一些

列表渲染

<text> lists:['1','2','3']</text>
<block wx:for="{{lists}}" wx:key="index">
 <view>
  {{item}} -- {{index}}
 </view>
</block>

<text>objlist:{"name":"xxf2"}</text>
<view wx:for="{{objlist}}" wx:key="*this" wx:for-item="zq" wx:for-index="i">
 {{zq}} -- {{i}}
</view>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/cfa5ab79f88e4a948e6c6d8861837fe0.png)


列表渲染配合block使用，block其实就和Vue中template标签一样不会渲染在页面中

item 是微信小程序默认遍历lists数据中出来的每项 ,wx:for-item="zq"  可以通过这样给

item 取别名，index 是是微信小程序默认遍历lists数据中出来的每项的下标（对象的话就是对应的key）wx:for-index="i"  可以给其取别名。

`wx:key` 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 `*this` 代表在 for 循环中的 item 本身，这种表示需要 **item 本身是一个唯一的字符串或者数字** 其它类型不行
3. `wx:key`  我的理解其作用就是 和Vue 和React 中key 一样目的都是为了通过diff算法的比较，达到复用的目的。一句话总结 key的作用就是 为了高效的更新虚拟DOM.