微信小程序中的条件渲染和列表渲染
- 1. 条件渲染
- 1.1. 语法格式 (wx:if, wx:elif ,wx:else)
- 1.2. block标记
- 1.3. hidden属性
- 1.4. wx:if 与 hidden 的对比
- 2. 列表渲染
- 2.1. wx:for 语法格式 及 wx:key的使用
1. 条件渲染
1.1. 语法格式 (wx:if, wx:elif ,wx:else)
<view wx:if="{{condition}}">True</view>
当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. block标记
可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。
block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。
从下面的例子来观察下，渲染出的页面结构有何特点：
<block wx:if="ture">
<view >view1</view>
<view >view2</view>
</block>
block标签未曾渲染，只是充当一个包裹性质的容器
1.3. hidden属性
学过前端三剑客的应该看到这个属性就明白了，hidden是用来控制元素的显示与隐藏的。
在hidden属性上，通过条件判断元素是否显示
<view hidden="{{condition}}"}>condition条件为真时隐藏，为假时显示</view>
hidden属性，实际上是 display=none的效果
说明如下：
<view hidden="ture">条件为真时隐藏，为假时显示</view>
1.4. wx:if 与 hidden 的对比
- 运行方式不同
● wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
● hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏 - 使用建议
● 频繁切换时，建议使用 hidden
● 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
2. 列表渲染
2.1. wx:for 语法格式 及 wx:key的使用
wx:for 就是用来遍历数组的,可以循环渲染重复的组件结构
- 默认wx:for的格式，每一项的索引为index,每一项的项内容是item
<view wx:for="{{array}}">
索引：{{index}} 当前项内容 {{item}}
</view>
- 自定义 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>
- wx:key的作用就是在列表渲染的过程中，给当前列表项指定唯一的key值，从而提高渲染的效率。
例如下面的例子：
数据部分 ，list.js
data: {
userList:[
{id:0,name:'张三'},
{id:1,name:'李四'},
{id:2,name:'王五'},
]
},
页面渲染部分,list.wxml
<view wx:for="{{userList}}" wx:key="id">
索引：{{index}} 当前项内容 {{item.name}}
</view>
