每个块中的 SvelteJS 样式特定元素

Question

给出关于每个块的 svelte js 教程示例 https://svelte.dev/tutorial/each-blocks 如果我有更多元素，我如何左对齐第一只猫，右对齐第二只猫，左对齐第三只猫等等。

Answer 1

因为在每个循环中都有可用的索引，您可以使用 class:directive based on the condition if the index is dividable by 2 or not (in your case not, since you described to align the uneven indexes to the right) >> REPL

设置 class

<script>
    let cats = [
        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
        { id: 'z_AbfPXTKms', name: 'Maru' },
        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
    ];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
    {#each cats as { id, name }, i}
        <li class:align-right="{i%2 !== 0}">
            <a target="_blank" href="https://www.youtube.com/watch?v={id}">
            {i + 1}: {name}
        </a>
    </li>
    {/each}
</ul>

<style>
    .align-right {
        text-align: right;
    }
</style>

每个块中的 SvelteJS 样式特定元素

SvelteJS styling specific element in each block

css

svelte