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:ifAssim, lwc:elseife 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.
