[小程序]使用代码渲染页面

一、条件渲染

? ? ? ? 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:'派大星'},
    ],

?