Условные конструкции

Поскольку 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, пустая строка ('') и специальное значение nothing в Lit не создают узлов. Дополнительные сведения см. в разделе Удаление дочернего содержимого.

В этом примере значение отображается, если оно существует; в противном случае не отображается ничего:

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

Для выражений атрибутов специальное значение nothing в Lit удаляет атрибут. Дополнительные сведения см. в разделе Удаление атрибута.

В этом примере атрибут aria-label отображается условно:

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

Редактировать эту страницу