Binding

Svelte | バインディング

バインディング機能を使うと、入力した内容を即時に表示することができる。

バインディング

src/App.svelte

  1. 入力コントロールの要素として、bind:value={変数名}を追加する
  2. 表示したい変数を {変数名} として記述する
1
2
3
4
5
6
7
8
9
10
11
<script>
        let message = '';
</script>

<main>
        <input placeholder="Hello, world" bind:value={message}>
        <div>{message}</div>
</main>

<style>
</style>

自動再計算

src/App.svelte

バインディングされた変数は表示内容が即時変更されるが、バインディングされていない変数はそのままでは変更されない。

バインディングされた変数の変更に伴って変更させるためには、$: で変数を宣言する。

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        let message = '';
        $: decoratedMessage = '!' + message + '!'
</script>

<main>
        <input placeholder="Hello, world" bind:value={message}>
        <div>{decoratedMessage}</div>
</main>

<style>
</style>