A renderização condicional é um recurso poderoso no LWC que permite mostrar ou ocultar dinamicamente o conteúdo com base em condições específicas.
Nova diretiva na LWC:
A partir da primavera de 23, o Salesforce introduziu novas diretivas para renderização condicional: lwc:if
Assim, lwc:elseif
e lwc:else
. Essas diretivas são mais recomendadas do que o legado if:true|false
.
Primeiro: renderização condicional simples
Este trecho será útil para como exibir diferentes saudações com base no nome do usuário:
Hi Jack, welcome back! Hello Rock, how are you doing today? Hi there!
Nesse caso, o lwc:if
Diretiva verifica se o userName
A propriedade é igual a ‘jack’. Aqui o primeiro modelo será exibido.
Se não, o lwc:elseif
Diretiva verifica se o userName
A propriedade é igual a ‘rock’. Agora, o segundo modelo será exibido.
Se os dois primeiros falharem, o lwc:else
O modelo é renderizado.
Segundo: renderização condicional com loops
Você pode usar a renderização condicional com loops para exibir conteúdo diferente para cada item no loop. Vamos ver o exemplo.
Neste exemplo, o for:each
loop iterado sobre o products
variedade. Para cada produto, o lwc:if
Diretiva verifica se o quantity
A propriedade é igual a 0. Se for, a mensagem “esgotada” é exibida.
Final: renderização condicional com formulários
Você pode usar a renderização condicional para mostrar ou ocultar elementos de formulário com base na entrada do usuário.
Neste exemplo, o onchange
O manipulador de eventos atualiza o selectedOption
propriedade com base na seleção do usuário. O lwc:if
A diretiva verifica se o selectedOption
A propriedade é igual a ‘opção2’. Se for, o campo de senha é exibido.
Estes são apenas alguns exemplos básicos de renderização condicional na LWC. Você pode usar esse recurso para criar uma ampla gama de aplicativos da Web dinâmicos e interativos.