微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明

1. 条件渲染

1.1. 语法格式 (wx:if, wx:elif ,wx:else)

<view wx:if="{{condition}}">True</view>
1

当condition条件为true时，代码块渲染显示，为false时，代码块不进行渲染.

可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断

<!-- type 为 当前页面的.js文件中的data的数据 -->
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>
1
2
3
4

1.2. block标记

可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。
block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。

从下面的例子来观察下，渲染出的页面结构有何特点：

<block wx:if="ture">
  <view >view1</view>
  <view >view2</view>
</block>
1
2
3
4

block标签未曾渲染，只是充当一个包裹性质的容器

1.3. hidden属性

学过前端三剑客的应该看到这个属性就明白了，hidden是用来控制元素的显示与隐藏的。
在hidden属性上，通过条件判断元素是否显示

<view hidden="{{condition}}"}>condition条件为真时隐藏，为假时显示</view>
1

hidden属性，实际上是 display=none的效果

说明如下：

<view hidden="ture">条件为真时隐藏，为假时显示</view>
1

1.4. wx:if 与 hidden 的对比

1. 运行方式不同
   ● wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
   ● hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
2. 使用建议
   ● 频繁切换时，建议使用 hidden
   ● 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

2. 列表渲染

2.1. wx:for 语法格式 及 wx:key的使用

wx:for 就是用来遍历数组的,可以循环渲染重复的组件结构

1. 默认wx:for的格式，每一项的索引为index,每一项的项内容是item

<view wx:for="{{array}}">
  索引：{{index}}  当前项内容 {{item}}
</view>
1
2
3

2. 自定义 wx:for中的索引和项
   自定义wx:for中的项和索引，使用wx:for-index="xxxx"来指定索引名，使用wx:for-item="xxxx"来指定项名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
  索引：{{idx}}  当前项内容 {{itm}}
</view>
1
2
3

3. wx:key的作用就是在列表渲染的过程中，给当前列表项指定唯一的key值，从而提高渲染的效率。
   例如下面的例子：
   数据部分 ，list.js

data: {
  userList:[
    {id:0,name:'张三'},
    {id:1,name:'李四'},
    {id:2,name:'王五'},
  ]
},
1
2
3
4
5
6
7

页面渲染部分,list.wxml

<view wx:for="{{userList}}" wx:key="id">
  索引：{{index}}  当前项内容 {{item.name}} 
</view>
1
2
3