0

我目前正在学习如何在 Svelte 中使用绑定。我找到了我正在练习的这个例子,并且想稍微改变一下代码。我正在尝试使所选项目出现在同一行的 1 个标记中,而不是为每个选中的选项显示多个 p 标记。

  • 如果 Roger 和 Syd 都被选中,那么我不想在一行中列出 Roger,然后在下面的另一行中列出 Syd,我只想拥有 --> Roger, Syd(在单个 p 标签中的同一行上)。

我知道我只需要骑上每个,但我不确定我可以用什么来代替它。我仍然想让这个例子尽可能简单。这是示例:

  <script>
    let goodDogs = []
    let dogs = ['Roger', 'Syd']
</script>

<h2>
    Who's a good dog?
</h2>

<p>
    {#each dogs as dog}
        <p>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></p>
    {/each}
</p>

<h2>
    Good dogs according to me:
</h2>

<p>
    {#each goodDogs as dog}
        <p>{dog}</p>
    {/each}
</p>
4

1 回答 1

0

这不是一个真正的 Svelte 问题,更像是一个一般的 HTML 问题。也就是说,我想,如果我理解正确的话,你会想要做类似下面的事情,你有你的#each for dogs:

<p>
    {#each dogs as dog}
            <span>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></span>
    {/each}
</p>

发生的事情是我们交换了一个块标签

(一个位于它自己的空间中),用于内联标签(一个可以与其他标签并排放置的标签)。您可以通过 CSS 控制这些属性,但通常您不应该尝试更改元素的默认显示,这更有可能表明您使用了错误类型的标签。

还值得注意的是,嵌套

不建议使用标签,将外部标签更改为 a 以包含元素可能更合适。

通常,您可能会出于上述目的使用 an,它是用于描述列表的标记。然后,您可以将列表样式设置为水平而不是垂直 - 网上有很多教程。可以在这里找到有关 ul 标签的详细信息

您可能会注意到您的列表过于密集且过于紧密。您可以考虑向列表项(或跨度标签)添加填充。同样,这可以通过 CSS 进行控制。

还有一点要讨论您在此处使用的 h2 标签,因为它们是标题,并不完全适合您想要实现的目标,但同样,就简单地回答这个问题而言,我的修复上面提到的 ve 将解决眼前的问题,并给出了关于学习更多关于 HTML 和 CSS 的建议。

希望这可以帮助!

于 2020-04-03T22:35:23.447 回答