[英]Conditionally display Element using 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>
如何根据我的app 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元素。 if.bind将不会在您的页面上呈现它。
如果你需要在不满足条件时完全从标记中删除元素,你可以使用if.bind
(如@Pratik Gajjar回答):
<template>
<div if.bind="auth.isLoggedIn">
<!--this DOM element will be bind only if auth.isLoggedIn is true-->
</div>
</template>
如果需要在元素上有条件地设置display: none
,可以使用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';
}
}
然后在我的app.html中:
<require from='css-display'></require>
<form css="display: ${isLoggedIn() | cssdisplay}"></form>
热潮,完成了。
您可以使用if.bind
和show.bind
通过检查条件来绑定元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.