更新时间:2024-11-13 GMT+08:00
分享

条件渲染

在页面开发中,可能需要根据某些条件来动态显示或隐藏页面中的内容,例如:如果您希望当用户已经登录的时候,显示“欢迎登录”的文字,未登录的时候,显示“请登录”的文字。

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择前端开发平台 > 前端应用
  3. 单击待编辑应用模块内的“开发应用”,进入设计器。
  4. 拖拽组件至画布,分别输入希望展示的文字。
  5. 添加变量,例如state.isLogin,具体操作可参考添加页面变量

    图1 添加变量

  6. 选中组件,在组件属性设置面板选择“高级”。
  7. 单击“是否渲染”后的,进行变量绑定。

    图2 绑定变量

  8. 选项绑定的变量,单击“确定”。

    绑定成功后可根据变量state.isLogin的值,查看渲染效果。

    图3 state.isLogin为false时
    图4 state.isLogin为ture时

相关文档