条件语句

由于 Lit 利用了正常的 Javascript 表达式，您可以使用标准的 Javascript 控制流结构，例如 条件运算符、函数调用以及 if 或 switch 语句来渲染条件内容。

JavaScript 条件语句还允许您组合嵌套的模板表达式，您甚至可以将模板结果存储在变量中以便在其他地方使用。

使用条件运算符 ? 的三元表达式是添加内联条件语句的好方法。

render() {
  return this.userName
    ? html`Welcome ${this.userName}`
    : html`Please log in <button>Login</button>`;
}

您可以在模板之外使用 if 语句来表达条件逻辑，以计算要在模板内使用的值。

render() {
  let message;
  if (this.userName) {
    message = html`Welcome ${this.userName}`;
  } else {
    message = html`Please log in <button>Login</button>`;
  }
  return html`<p class="message">${message}</p>`;
}

或者，您可以将逻辑分解到一个单独的函数中，以简化您的模板。

getUserMessage() {
  if (this.userName) {
    return html`Welcome ${this.userName}`;
  } else {
    return html`Please log in <button>Login</button>`;
  }
}
render() {
  return html`<p>${this.getUserMessage()}</p>`;
}

在大多数情况下，JavaScript 条件语句是您进行条件模板渲染所需的一切。但是，如果您在大型复杂模板之间切换，您可能需要节省每次切换时重新创建 DOM 的成本。

在这种情况下，您可以使用 cache 指令。cache 指令会为当前未渲染的模板缓存 DOM。

render() {
  return html`${cache(this.userName ?
    html`Welcome ${this.userName}`:
    html`Please log in <button>Login</button>`)
  }`;
}

有关更多信息，请参阅 cache 指令。

有时，您可能希望在条件运算符的一个分支中不渲染任何内容。这通常需要用于子表达式，有时也需要用于属性表达式。

对于子表达式，值 undefined、null、空字符串 ('') 以及 Lit 的 nothing 哨兵值都不会渲染任何节点。有关更多信息，请参阅 移除子内容。

此示例在值存在时渲染该值，否则不渲染任何内容。

render() {
  return html`<user-name>${this.userName ?? nothing}</user-name>`;
}

对于属性表达式，Lit 的 nothing 哨兵值会移除该属性。有关更多信息，请参阅 移除属性。

此示例会根据条件渲染 aria-label 属性。

html`<button aria-label="${this.ariaLabel || nothing}"></button>`

编辑此页面