高级面板设置

条件渲染

在实际的页面业务开发中，可能需要根据某些条件动态显示或隐藏页面中的内容，如：当用户已经登录的时候，显示欢迎登录的文本，未登录的时候，显示请登录的文本。 那么就可以在组件上面绑定条件渲染，单击“绑定变量”，选择变量（如：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"
  }
]

图2 循环渲染

相关属性

• 循环数据，即需要循环渲染的数组，在这里是state.list。
• 迭代变量名，在循环渲染子项对应的变量名，默认为item。
• 索引变量名，循环渲染的索引变量名，默认为index。
• key，标识唯一的key，默认为index。