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:elseify 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