Svelte基础
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
在Dom元素中所有的输入都是字符串,即使为输入框设置了type属性:type="number"
或者 type="range"
。所以我们在处理输入值时就要记得转换类型。
但是在使用bind:value
时就不需要担心了,贴心的Svelte已经帮我们处理好了。
In the DOM, every input value is a string. That’s unhelpful when you’re dealing with numeric inputs —
type="number"
andtype="range"
— as it means you have to remember to coerceinput.value
before using it. Withbind: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>