# 设置UI引擎前端页面组件高级配置属性 在UI引擎页面设计器中，所有内置组件均提供"高级配置"属性，通过右侧"高级"设置面板，开发者可对组件的条件渲染、循环渲染相关参数进行精细化配置，同时设置组件事件以实现数据交互，底层均基于Vue的"v-if"和"v-for"语法实现，兼顾易用性与语法规范性。 #### 前提条件 - 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。 - 当前页面已完成至少一个组件的添加或布局设计，具体操作请参见[创建前端页面](https://support.huaweicloud.com/usermanual-idme/idme_ui_0015.html)。 #### 高级配置属性说明 高级配置属性是实现组件动态渲染的核心配置项，各属性的具体含义、功能及变量绑定支持情况如下所示： | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 是否渲染 | 控制组件是否根据条件动态显示或隐藏（对应Vue的"v-if"语法）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533766509.png "点击放大")：关闭渲染。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501846518.png "点击放大")：开启渲染。 | 是 | | 循环数据 | 适用于需要重复渲染的模块，可在此设置要循环的数组数据（类似Vue的"v-for"用法）。 如果页面中存在多份结构相同、内容动态生成的数据，可通过此功能实现数据驱动的循环渲染。 | 是 | | 迭代变量名 | 在循环渲染中子项对应的变量名，默认为"item"。 | 否 | | 索引变量名 | 循环渲染中的索引变量名（即数组索引），默认为"index"。 | 否 | | key | 用于在循环渲染中为每个节点提供唯一标识，默认为当前索引值"index"。 建议根据实际情况（如数据中的"id"字段）设置具有稳定唯一性的值，以优化Vue的虚拟DOM更新性能。 | 否 | #### 循环渲染配置 当页面需要展示若干份重复且动态生成的内容时（如商品列表、表格数据等），可以使用循环渲染功能。其实现基于Vue的"v-for"语法。 以下以"文本"组件为例，介绍具体配置步骤： 1. 根据[创建与绑定页面状态变量](https://support.huaweicloud.com/usermanual-idme/idme_ui_0087.html)，添加一个页面状态变量（如"list"），并将其"初始值"设置为一个数组。 图1添加list状态变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501850930.png "点击放大") 初始值示例： ``` [ "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ] ``` 2. 在页面设计器的中心画布区，单击选中目标组件（如"文本"组件）。 3. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533770933.png)，展开"高级"设置面板。 4. 在"高级配置"下，单击"循环数据"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501691076.png)，弹出"变量绑定"窗口。 图2循环数据 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533610983.png) 5. 在"变量列表"的"State属性"分类下，选择[1]创建的状态变量"list"，单击"确定"。 图3绑定状态变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501850932.png "点击放大") 6. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533770935.png)，切换至"属性"设置面板。 7. 在"基础信息"下，单击"文本内容"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501691078.png)，弹出"变量绑定"窗口。 8. 在"变量"栏中，填写默认迭代变量"item"（如果为对象数组，需通过"item.propertyName"的形式指定对象属性，如"item.name"），单击"确定"。 完成变量绑定后，可直接在页面设计器的中心画布区查看组件的循环渲染效果。 图4渲染效果 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501850934.png "点击放大") 对应的底层代码示例参考如下： 图5代码示例 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533770937.png "点击放大") #### 条件渲染配置 在页面开发中，可能需要根据某些条件动态显示或隐藏组件内容。此时可以使用条件渲染功能，其实现基于Vue的"v-if"语法。 以下以"文本"组件为例，介绍具体配置步骤： 1. 根据[创建与绑定页面状态变量](https://support.huaweicloud.com/usermanual-idme/idme_ui_0087.html)，添加一个布尔类型的页面状态变量（如"visible"），作为条件渲染的判断依据。 图6添加visible状态变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501903742.png "点击放大") 2. 在页面设计器的中心画布区，单击选中目标组件。例如"文本"组件。 3. 单击组件右下方的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501864158.png)，复制一份组件。 4. 为两个组件分别设置不同状态下需要显示的内容。 图7设置文本内容 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502061442.png "点击放大") 5. 在页面设计器的中心画布区，单击选中其中一个组件。 6. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502063602.png)，展开"高级"设置面板。 7. 在"高级配置"下，单击"是否渲染"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533663637.png)，弹出"变量绑定"窗口。 8. 在"变量列表"的"State属性"分类下，选择[1]创建的状态变量"visible"，单击"确定"。 图8绑定visible变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502062246.png "点击放大") 9. 重复[5] - [8]操作，为第二个组件绑定"visible"变量，并对变量进行手动取反，实现两个组件的互斥显示。 图9取反visible变量 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533821757.png "点击放大") 完成变量绑定后，可直接在页面设计器的中心画布区查看静态渲染效果。 如需动态查看条件渲染效果，可在画布中添加"按钮"组件，并绑定一个切换状态变量值的事件函数，在预览页面中通过按钮切换状态变量的值查看不同状态的显示效果。 图10动态查看条件渲染效果 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533667453.png "点击放大")