Svelte 的核心是一个强大的响应式系统,用于保持 DOM 与你的应用程序状态同步 — 例如,响应事件的时候。
通过使用 $state(...)
包裹值使 count
声明变成响应式:
App
let count = $state(0);
这被称为符文(rune),它告诉 Svelte count
不是普通变量。符文看起来像函数,但它们不是 — 当使用 Svelte 时,它们是语言本身的一部分。
剩下的就是实现 increment
函数:
App
function increment() {
count += 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
let count = 0;
function increment() {
// TODO implement
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>