如何使用Svelte框架操作DOM

Question

我对Svelte框架很陌生。最近，我在玩Svelte，但感到困惑，我该如何像使用jQuery在jQuery中使用Svelte那样操作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，等等-无需重写所有代码。