dom - 如何使用 Svelte 框架操作 DOM

Question

我对 Svelte 框架非常陌生。最近我在玩 Svelte，但对如何使用 Svelte 在 jQuery 中操作 DOM 感到困惑。

我正在尝试显示/隐藏<li>按钮单击。

Answer 1

在 Svelte 和其他状态驱动的 UI 框架中，您很少操作 DOM。相反，您实际上是告诉框架 DOM对于某些给定数据应该是什么样子，并让它找出所有细节。

因此，要显示或隐藏元素以响应按钮单击，您需要执行以下操作（REPL 链接）：

<button on:click='set({ visible: !visible })'>toggle visibility</button>

{{#if visible}}
  <p>hello!</p>
{{/if}}

或者，如果您想将元素保留在 DOM 中但将其隐藏（REPL 链接）：

<button on:click='set({ visible: !visible })'>toggle visibility</button>

<p hidden='{{!visible}}'>hello!</p>

这比手动操作 DOM好得多，因为您可以更改所有细节——它是什么类型的元素，因此您将使用什么 jQuery 选择器来定位它，是否还有其他需要更改的内容visible，等等——无需重写所有代码。