使用 svelte 隐藏和显示元素的简单方法

Question

我想要一个简单的方法来隐藏和显示带有 svelte 按钮的元素，我该怎么做？在 vanilla JS 中做起来更简单吗？

Answer 1

这段代码对我有用，它是 Svelte 提供的示例的修改版本，可以在此处找到

<script>
    let visible = true;

    function toggleVissible() {
        visible = !visible
    }
</script>

<button on:click={toggleVissible}>
    Hide
</button>

{#if visible}
    <p>
        This text will hide.
    </p>
{/if}

Answer 2

Svelte 有{#if}这样的指令，它可以与本地状态绑定，而本地状态又可以通过按钮的on:click.

在 vanilla JS 中是否更容易取决于很多因素，包括整体复杂性。从长远来看，使用 Svelte 会让事情变得更容易。

我建议做教程...