三、条件和列表渲染（微信小程序开发【有基础】-组件篇）

1.if 和 else，以及 hidden 渲染

index.wxml（页面代码）：

<view wx:if="{{flag}}">
    if渲染
</view>
<view wx:else>
    if-else渲染
</view>
<view hidden="{{flag}}">
    hidden
</view>

index.js（页面js代码）：

Page({
      data: {
        flag:true
    }
}）

两者区别在于：if渲染是通过生成和没有生成代码，来达到显示和隐藏的效果，但是hidden渲染是通过控制样式 display：none 来进达到隐藏和显示的效果

注意：wx:if 也是支持在表达式里面放三元运算和表达式：如wx:if = “{{ flag ? true : false }}”

2.block

index.wxml（页面代码）：

<block wx:if="{{flag}}">
    <view>组件</view>
</block>

 此时 block 并没有被渲染，这样子不会影响布局

3.for列表渲染

index.js（页面js代码）：

page({
    data: {
        arr:[1,2,3],
        arrobj:[
            {
                id:1,
                name:"林"
            },
            {
                id:2,
                name:"王"
            }
        ]
    },
})

index.wxml（页面代码）：

<view wx:for="{{arr}}">
 {{index}}---{{item}}
</view>

默认情况下索引是index，遍历对象是item

 当然也可以自定义

index.wxml（页面代码）：

<view wx:for="{{arrobj}}" wx:for-index="idx" wx:for-item="data">
 {{idx}}---{{data.name}}
</view>

 如果循环列表是动态的，我们应当为他绑定唯一标识key

index.wxml（页面代码）：

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