一、条件渲染
1.单个控制
使用wx:if="{{条件}}"来判断是否需要渲染这段代码,同时可以结合wx:elif和wx:else来判断
<view wx:if="{{type==0}}">0</view>
<view wx:elif="{{type==1}}">1</view>
<view wx:else>Out</view>
2.分组控制
使用<block>组件将内容包裹即可实现成组条件渲染,如:
<block wx:if="{{type==0}}">
<view>这个数是0</view>
<view>这个不是目标值</view>
</block>
<block wx:else>
<view>这个数不是0</view>
<view>这个是目标值</view>
</block>
3.hidden属性
对单个控件使用hidden="{{条件}}"也可以控制其是否渲染(Ture为隐藏)
<view hidden="{{type==0}}">符合条件</view>
4.wx:if和hidden的区别
wx:if是动态渲染和移除元素
hidden只是切换样式,建议需要频繁切换的情况使用
二、列表渲染
1.wx:for
<view wx:for="{{List}}">
索引是{{index}},内容是{{item}}
</view>
List:['Apple','Huawei','Xiaomi']
2.wx:key
用这个函数可以手动为渲染指定索引:
<view wx:for="{{User}}" wx:key="id">
用户名为{{item.name}}
</view>
User:[
{id:1,name:'小明'},
{id:2,name:'Tom'},
{id:3,name:'派大星'},
],