如何使用 Svelte 框架操作 DOM

Question

我对 Svelte 框架还很陌生。最近我在玩 Svelte，但我很困惑如何使用 Svelte 来操纵 DOM，就像在 jQuery 中那样。

我正在尝试 show/hide 单击按钮时 <li>。

Answer 1

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

因此，要显示或隐藏元素以响应按钮点击，您需要执行如下操作 (REPL link)：

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

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

或者，如果您想将元素保留在 DOM 中但将其隐藏 (REPL link)：

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

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

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

How to manipulate DOM using Svelte framework