javascript – 有条件地使用Aurelia显示元素

所以我有我的auth类注入我的main.js：

import {Auth} from 'auth';
import {inject} from 'aurelia-framework';

@inject(Auth)
export class App {
    constructor(auth) {
        this.auth = auth;
    }

    get isLoggedIn() { return this.auth.isLoggedIn; }
}

所以在我的app.html

<form>
    <!-- form login elements -->
</form>

如何根据我的应用程序getter函数有条件地显示此元素.

解决方法

您可以使用if.bind有条件地绑定DOM元素.

<form>
      <div if.bind="auth.isLoggedIn">
        <!--this DOM element will be bind only if auth.isLoggedIn is true-->
      </div>
 </form>

或者,您也可以使用show.bind,但这只会隐藏您的DOM元素.其中,如果.bind不会在您的页面上呈现.