如何使用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进行更改等 - 无需重写所有代码。