admin 
Sąlyginis perteikimas yra galinga LWC savybė, leidžianti dinamiškai parodyti ar paslėpti turinį pagal konkrečias sąlygas.
Nauja direktyva LWC:
Nuo pavasario 23, „Salesforce“ pristatė naujas sąlyginio pateikimo direktyvas: lwc:ifAr lwc:elseifir lwc:else. Šios direktyvos yra labiau rekomenduojamos nei palikimas if:true|false .
Pirmasis: paprastas sąlyginis perteikimas
Šis fragmentas bus naudingas, kaip parodyti skirtingus sveikinimus pagal vartotojo pavadinimą:
<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>
Šiuo atveju lwc:if Direktyva patikrina, ar userName Nuosavybė yra lygi „Jack“. Čia bus rodomas pirmasis šablonas.
Jei ne, lwc:elseif Direktyva patikrina, ar userName Nuosavybė yra lygi „uolienai“. Dabar parodys antrasis šablonas.
Jei pirmieji du nepavyks, lwc:else Pateikiamas šablonas.
Antra: sąlyginis perteikimas su kilpomis
Galite naudoti sąlyginį perteikimą su kilpomis, kad rodytumėte skirtingą kiekvieno kilpos elemento turinį. Pažiūrėkime pavyzdį.
<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>
Šiame pavyzdyje for:each kilpa iteruoja per products Masyvas. Kiekvienam produktui lwc:if Direktyva patikrina, ar quantity Nuosavybė yra lygi 0. Jei taip yra, rodomas pranešimas „išparduotas“.
Galutinis vienas: sąlyginis perteikimas su formomis
Galite naudoti sąlyginį pateikimą, kad parodytumėte ar paslėptumėte formos elementus pagal vartotojo įvestį.
<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>
Šiame pavyzdyje onchange Įvykių tvarkytojas atnaujina selectedOption Nuosavybė, pagrįsta vartotojo pasirinkimu. lwc:if Tada direktyva patikrina, ar selectedOption Nuosavybė yra lygi „Option2“. Jei taip yra, rodomas slaptažodžio laukas.
Tai tik keli pagrindiniai sąlyginio perteikimo LWC pavyzdžiai. Šią funkciją galite naudoti norėdami sukurti platų dinaminių ir interaktyvių žiniatinklio programų asortimentą.
Šaltiniai:
„Salesforce“ išleidimo pastaba
