Условные выражения

Поскольку 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>`

Изменить эту страницу