Условный рендеринг в LWC
Условный рендеринг — это мощная функция в LWC, которая позволяет вам динамически отображать или скрывать контент в зависимости от определенных условий.
Новая директива в LWC:
Начиная с весны 2017 года, Salesforce представила новые директивы для условного отображения: lwc:if, lwc:elseif и lwc:else. Эти директивы более рекомендуемы, чем устаревшие if:true|false.
Первая: простой условный рендеринг
Этот фрагмент будет полезен для отображения различных приветствий в зависимости от пользователя’имя пользователя:
<шаблон> <шаблон lwc:if={Имя пользователя === 'Jack'}> Привет, Джек, с возвращением! Привет, Рок, как у тебя дела сегодня? <шаблон lwc:else> Привет всем!
В этом случае директива lwc:if проверяет, равно ли свойство userName ‘Jack’. Здесь будет показан первый шаблон.
Если нет, то директива lwc:elseif проверяет, равно ли значение свойства userName ‘Rock’. Теперь будет показан второй шаблон.
Если первые два не выполняются, отображается шаблон lwc:else.
Второй вариант: Условный рендеринг с циклами
Вы можете использовать условный рендеринг с циклами для отображения различного содержимого для каждого элемента в цикле. Давайте посмотрим на пример.
<шаблон для:каждого={продукта} для:элемента="продукт"> {product.name} <шаблон lwc:if={product.quantity === 0}> Все распродано
В этом примере цикл for:each выполняет итерацию по массиву products. Для каждого продукта директива lwc:if проверяет, равно ли значение параметра quantity 0. Если это так, отображается сообщение «Распродано».
И последнее: Условный рендеринг с помощью форм
Вы можете использовать условный рендеринг для отображения или скрытия элементов формы на основе пользовательского ввода.
<шаблон> <значение для молниеносного выбора={selectedOption} onchange={handleChange}> <значение параметра="option1">Параметр 1 <значение параметра="option2">Вариант 2 <шаблон lwc:если={выбранный вариант === 'вариант 2'}>
В этом примере обработчик события onchange обновляет свойство selectedOption на основе выбора пользователя. Затем директива lwc:if проверяет, равно ли свойство selectedOption значению ‘option2’. Если да, то отображается поле пароля.
Это всего лишь несколько основных примеров условного рендеринга в LWC. Вы можете использовать эту функцию для создания широкого спектра динамических и интерактивных веб-приложений.
Ресурсы:
Примечание к релизу Salesforce
Другие новости: