Svelte

Svelte | 制御文

if-else 文

src/App.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  let checked = false;
</script>

<main>
  <label>
    <input type="checkbox" bind:checked={checked}>
    Check Me!
  </label>
  {#if checked}
    <div>Checked!</div>
  {:else}
    <div>Hurry!</div>
  {/if}
</main>

<style>
</style>

foreach文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script lang="ts">
        let list:string[] = [
        ];
        function onClick() {
                list[list.length] = {
                        id:String(list.length + 1).padStart(2, '0'),
                        name:Math.random().toString(32).substring(2)
                };
        }
</script>

<table>
{#each list as data}
<tr>
<td>{data.id}</td>
<td>{data.name}</td>
</tr>
{/each}
</table>

<button on:click={onClick}>Add</button>