javascript - 如何更改Aurelia中输入字段的可见性？

我在奥雷利亚有以下表格。在表单的顶部，有一个下拉菜单可以选择用户类型。只有两个选择。当用户更改类型时，我需要显示和隐藏一些输入字段。

IE：当用户选择类型为“生产者”时，我需要隐藏用户名。当用户选择“作家”时，我需要显示用户名并隐藏电子邮件地址。像这样。需要使用JavaScript控制器执行此操作。

https://gist.github.com/chanakaDe/75934983cb4a02a7a8914959e38bf0f3

这是作为github要点的HTML代码。请给我一个解决方案。

最佳答案

您可以使用show.bind（如果您只想显示和隐藏元素），也可以使用if.bind（如果您要从DOM中添加和删除它）。例如：

<div class="form-group" id="div_username" if.bind="user_type === 'writer'">
  <label for="userame">Username:</label>
  <input type="text" class="form-control" id="userame" value.bind="userame" placeholder="Userame">
</div>

可运行示例https://gist.run/?id=33db6b8f919eb95d63b8bfbc2e912fe5-将用户类型更改为'writer'，您将看到用户名输入。