微信小程序开发 条件渲染wxif,hidden；列表渲染wx：for

条件渲染：

在微信小程序中，条件渲染使用wxif，wxelif，wxelse来实现

在wxml中

<view wx:if="{{count ===1}}">view1</view>
<view wx:elif="{{count ===2}}">view2</view>
<view wx:else="{{count ===3}}">view3</view>

count对应.js中

 data: {
    count:1,
    logs: []
  },

另外，可以通过hidden来控制标签是否显示

<view hidden="{{falg}}">1</view>

如果flag为true，则view标签隐藏，否则显示。

列表渲染

使用wx:for根据数组循环渲染重复的组件结构

在wxml中

<view wx:for="{{arr1}}">
  数组索引：{{index}} 对应的item项是：{{item}}
</view>

arr1对应的.js文件：

arr1:['华为','苹果','小米','联想']

运行结果如下：

 可以使用wx:key来提高渲染效率（推荐使用）

在wxml中

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

arrlist对应的.js文件：

arrlist:[
      {
        id:1,name:'张三'
      },
      {
        id:2,name:'李四'
      },
      {
        id:3,name:'赵五'
      }

运行效果：