如何使用Svelte框架来操纵DOM

Question

我对Svelte Framework几乎是新的。最近，我正在与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等更改的其他内容 - 而无需重写所有代码。