Devolución condicional en LWC – DevFacts | Blog de tecnología | Comunidad de desarrolladores
La representación condicional es una característica poderosa de LWC que le permite mostrar u ocultar contenido dinámicamente según condiciones específicas.
Nueva directiva en LWC:
A partir de Spring’23, Salesforce introdujo nuevas directivas para la representación condicional: lwc:if
, lwc:elseif
y lwc:else
. Estas directivas son más recomendables que la herencia if:true|false
.
Primero: renderizado condicional simple
Este fragmento será útil para mostrar diferentes saludos según el nombre de usuario:
<template> <template lwc:if={userName === 'Jack'}> Hi Jack, welcome back! </template> <template lwc:elseif={userName === 'Rock'}> Hello Rock, how are you doing today? </template> <template lwc:else> Hi there! </template> </template>
En este caso, el lwc:if
directiva comprueba si el userName
la propiedad es igual a ‘Jack’. Aquí se mostrará el primer modelo.
Si no, el lwc:elseif
directiva comprueba si el userName
La propiedad es igual a ‘Roca’. Ahora se mostrará el segundo patrón.
Si los dos primeros fallan, el lwc:else
se da el modelo.
Segundo: renderizado condicional con bucles
Puede utilizar la representación condicional con líneas para mostrar contenido diferente para cada elemento de la línea. Veamos el ejemplo.
<template for:each={products} for:item="product"> <div key={product.id}> <p>{product.name}</p> <template lwc:if={product.quantity === 0}> <span class="sold-out">Sold Out</span> </template> </div> </template>
En este ejemplo, el for:each
bucle itera sobre el products
rango. Para cada producto, el lwc:if
directiva comprueba si el quantity
propiedad es igual a 0. Si es así, se muestra el mensaje «Agotado».
Último: Declaración condicional con formularios
Puede utilizar la representación condicional para mostrar u ocultar elementos del formulario según la entrada del usuario.
<template> <lightning-select value={selectedOption} onchange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </lightning-select> <template lwc:if={selectedOption === 'option2'}> <lightning-input type="password" label="Password" required={true}></lightning-input> </template> </template>
En este ejemplo, el onchange
El controlador de eventos actualiza el selectedOption
propiedad basada en la selección del usuario. el lwc:if
La directiva luego verifica si el selectedOption
La propiedad es igual a ‘opción2’. Si es así, se muestra el campo de contraseña.
Estos son sólo algunos ejemplos básicos de donaciones condicionales en la LWC. Puede utilizar esta función para crear una amplia gama de aplicaciones web dinámicas e interactivas.
Recursos:
Nota de versión de Salesforce