有条件地显示使用Aurelia的元素

Conditionally display Element using Aurelia

本文关键字：Aurelia 元素 显示 有条件      更新时间：2023-09-26

所以我将我的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不会在您的页面上呈现它。

如果需要在不

满足条件时从标记中完全删除元素，可以使用if.bind（如 Gajjar @Pratik回答）：

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

如果需要有条件地设置 display: none on 元素，可以使用show.bind：

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

有关详细信息，请查看 http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6。

所以我创建了一个值转换器：

export class CssdisplayValueConverter {
    toView(value) {
        return value ? 'none' : 'display';
    }
}

然后在我的应用程序中.html：

<require from='css-display'></require>
<form css="display: ${isLoggedIn() | cssdisplay}"></form>

轰，完成了。

您可以使用

if.bind和show.bind通过检查条件来绑定元素

相关文章：