在 DOM 中,每个输入值都是一个字符串。当你处理数字输入(type="number"
和 type="range"
)时,这毫无用处,因为这意味着你必须记住在使用它之前强制 input.value
。
¥In the DOM, every input value is a string. That’s unhelpful when you’re dealing with numeric inputs — type="number"
and type="range"
— as it means you have to remember to coerce input.value
before using it.
使用 bind:value
,Svelte 会为你处理它:
¥With bind:value
, Svelte takes care of it for you:
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>
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>