高级面板设置
条件渲染
在实际的页面业务开发中,可能需要根据某些条件动态显示或隐藏页面中的内容,如:当用户已经登录的时候,显示欢迎登录的文本,未登录的时候,显示请登录的文本。 那么就可以在组件上面绑定条件渲染,单击“绑定变量”,选择变量(如:state.isUserLogin),组件就会根据变量(state.isUserLogin)的布尔值来进行渲染。
循环渲染
页面可能有许多重复的、动态生成的内容,如:列表页、表格数据等,这时候,我们就需要用到循环渲染。
可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。
举例:假如状态变量中有一个申请单列表list,我们希望渲染出申请单的名称、申请单Key以及版本,那么我们可以使用循环渲染来实现。
// 申请单list 实例数据 const list = [ { "name": "申请单1", "key": "Process1", "version": "1" }, { "name": "申请单2", "key": "Process2", "version": "2" }, { "name": "申请单3", "key": "Process3", "version": "3" } ]
相关属性
- 循环数据,即需要循环渲染的数组,在这里是state.list。
- 迭代变量名,在循环渲染子项对应的变量名,默认为item。
- 索引变量名,循环渲染的索引变量名,默认为index。
- key,标识唯一的key,默认为index。