Simple way to hide and show element with svelte-CodePudding

I want to have a simple with way to hide and show an element with a button on svelte, how can I do it? Also is it simpler to do it in vanilla JS?

CodePudding user response：

this code worked for me, it is a modified version of an example provided by Svelte which can be found here

<script>
    let visible = true;

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

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

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

CodePudding user response：

Svelte has the {#if} directive for that, which can be tied to local state, which in turn can be changed via a button's on:click.

Whether it is easier in vanilla JS depends on many things, including the overall complexity. In the long run, things tend to be easier with Svelte.

I would recommend doing the tutorial...