¿Alguien ha usado Svelte en sus proyectos? Solo tengo una pequeña pregunta. Digamos que está recorriendo una matriz y mostrando los datos en la matriz. Y hay 4 objetos en la matriz. Si solo quiero diseñar la primera iteración (bluma). ¿Cómo lo hago?
let items = [ { icon: 'book', title: 'bulma', tags: ['public', 'sources'] }, { icon: 'book', title: 'marksheet', tags: ['private'] }, { icon: 'book', title: 'minireset.css', tags: ['public', 'sources'] }, { icon: 'code-branch', title: 'daniellowtw/infboard', tags: ['public', 'forks'] }, { icon: 'code-branch', title: 'mojs', tags: ['private'] } ] {#each filteredItems as item} <a class="panel-block {item.}"> <span class="panel-icon"> {#if item.icon === "code-branch"} <i class="fas fa-code-branch" aria-hidden="true"></i> {:else if item.icon ==="book"} <i class="fas fa-book" aria-hidden="true"></i> {/if}Siempre que esté disponible un enfoque CSS puro, prefiero usarlo. Aquí puede hacer uso del :first-child :
<div class="panel-items"> {#each filteredItems as item} <a class="panel-block"> <span class="panel-icon"> {#if item.icon === "code-branch"} <i class="fas fa-code-branch" aria-hidden="true"></i> {:else if item.icon ==="book"} <i class="fas fa-book" aria-hidden="true"></i> {/if} </span> </a> {/each} </div> <style> .panel-block { /* general panel block styling */ } .panel-block:first-child { /* first panel block style overrides */ } </style>Tenga en cuenta que todo el ciclo se mantiene dentro de su propio contenedor div para asegurarse de que el primer elemento del ciclo sea de hecho el primer elemento secundario de su contenedor principal.
Esto se puede hacer utilizando el index proporcionado como segundo argumento del bloque #each :
{#each filteredItems as item, i} <span style="color:{i === 0 ? 'green' : 'red'}"> {item.title} </span> {/each}Referencia: cada bloque en un tutorial esbelto.