如何使用Svelte框架操纵DOM

Question

我对Svelte框架非常陌生。最近我和Svelte一起玩，但是如果像使用Svelte在jQuery中操作DOM一样困惑。

我正试图在按钮点击时显示/隐藏<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等进行更改的内容 - 无需重写所有代码。