*ngIf 相当于 lit-element/polymer

Question

我希望在 lit-element 中实现基于条件的 HTML，需要 Angular 提供的类似 *ngIf 的东西。

我可以根据条件呈现不同的 HTML，但如果可以根据条件完成就更好了。

Answer 1

您可以使用普通 Javascript。在 official documentation

中解释得很好

示例：

${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}

Answer 2

扩展 Kuba 的回答，最好在 lit-html 条件下尽可能具体，因为您的条件范围越广，当条件变化。例如，您可以使 official documentation 中给出的示例：

this.myBool ? html`<p>something</p>` : html`<p>something else</p>`

并更有效地编写为：

html`<p>${this.myBool ? 'something' : 'something else'}</p>`

这里的这个小变化并没有太大变化，但是当您可以减少组件层的重新渲染量时，它就会开始增加。

有关 lit-html 如何处理模板渲染的更详尽的解释，请参阅：https://lit-html.polymer-project.org/guide/concepts#template-creation

*ngIf equivalent in lit-element/polymer