跳至主要內容

在 DOM 中,每個輸入值都是字串。當你處理數值輸入時(type="number"type="range")這會造成不便,因為這意味著你必須記住在使用 input.value 之前強制轉換它。

使用 bind:value,Svelte 會為你處理這些。

App
<label>
	<input type="number" bind:value={a} min="0" max="10" />
	<input type="range" bind:value={a} min="0" max="10" />
</label>

<label>
	<input type="number" bind:value={b} min="0" max="10" />
	<input type="range" bind:value={b} min="0" max="10" />
</label>

在 GitHub 上編輯此頁面

上一個 下一個
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	let a = $state(1);
	let b = $state(2);
</script>
 
<label>
	<input type="number" value={a} min="0" max="10" />
	<input type="range" value={a} min="0" max="10" />
</label>
 
<label>
	<input type="number" value={b} min="0" max="10" />
	<input type="range" value={b} min="0" max="10" />
</label>
 
<p>{a} + {b} = {a + b}</p>