如何使用Svelte框架操作DOM

我对苗条的框架非常陌生。最近我在玩Svelte，但不知道如何使用Svelte在jQuery中操作DOM

---

我试图在单击按钮时显示/隐藏一个

。

在Svelte和其他状态驱动的UI框架中，很少操作DOM。相反，您可以告诉框架对于某些给定数据DOM应该是什么样子，并让它了解所有细节

因此，要显示或隐藏响应按钮单击的元素，您可以执行如下操作（）：

切换可见性
{{#如果可见}
你好!

{{/if}

或者，如果希望将元素保留在DOM中，但将其隐藏（）：

切换可见性

---

这比手动操作DOM要好得多，因为您可以更改所有细节—它是什么类型的元素，因此您将使用什么jQuery选择器来定位它，是否还有其他需要根据

可见的内容进行更改的内容，etc-无需重写所有代码。
在Svelte和其他状态驱动的UI框架中，很少操作DOM。相反，您可以告诉框架对于某些给定数据DOM应该是什么样子，并让它了解所有细节

因此，要显示或隐藏响应按钮单击的元素，您可以执行如下操作（）：

切换可见性
{{#如果可见}
你好!

{{/if}

或者，如果希望将元素保留在DOM中，但将其隐藏（）：

切换可见性


这比手动操作DOM要好得多，因为您可以更改所有细节—它是什么类型的元素，因此您将使用什么jQuery选择器来定位它，是否还有其他东西需要根据
可见的
等进行更改—而无需重写所有代码

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

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

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

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