1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
let isLogin = false
function changeState() {
isLogin = !isLogin
}
</script>
<main>
{#if !isLogin}
<div>
登录
</div>
{/if}
{#if isLogin}
<div>
退出
</div>
{/if}
<button on:click={changeState}>切换状态</button>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
let isLogin = false
function changeState() {
isLogin = !isLogin
}
</script>
<main>
{#if !isLogin}
<div>
登录
</div>
{:else}
<div>
退出
</div>
{/if}
<button on:click={changeState}>切换状态</button>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
let count = 1
function addCount() {
count ++
}
</script>
<main>
{#if count > 3 && count <= 5}
<div>count 大于 3</div>
{:else if count > 5}
<div>count 大于 5</div>
{:else}
<div>count 小于等于 3</div>
{/if}
<button on:click={addCount}>{count}</button>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
let students = [
{
num: 1,
name: 'zs',
age: 12,
hobby: '篮球'
},
{
num: 2,
name: 'ls',
age: 11,
hobby: '网球'
},
{
num: 3,
name: 'ww',
age: 14,
hobby: '羽毛球'
},
]
</script>
<main>
{#each students as student {student.num}}
-> student.num为key值
<li>第{idx}人——我的名字是{student.name}, 我今年{student.age}, 最喜欢的活动是{student.hobby}</li>
{/each}
---
{#each students as {name, age, hobby},idx} // 可以将内容解构出来
<li>第{idx}人——我的名字是{name}, 我今年{age}, 最喜欢的活动是{hobby}</li>
{/each}
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
let promise = getRandomNumber();
async function getRandomNumber() {
const res = await fetch(`tutorial/random-number`);
const text = await res.text();
if (res.ok) {
return text;
} else {
throw new Error(text);
}
}
function handleClick() {
promise = getRandomNumber();
}
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

1
2
3
4
{#await promise then value}
<p>the value is {value}</p>
{/await}