Skip to main content

Khi xây dựng giao diện người dùng, bạn sẽ phải làm việc với những mảng dữ liệu. Trong bài này, markup <button> được lặp lại nhiều lần, mỗi lần một màu, nhưng vẫn chưa hiển thị đủ tất cả các màu.

Thay vì phải sao chép, dán rồi sửa một cách khổ sở, ta có thể bỏ hết trừ nút đầu tiền, rồi sử dụng khối each:

App.svelte
<div>
	{#each colors as color}
		<button
			aria-current={selected === 'red'}
			aria-label="red"
			style="background: red"
			on:click={() => selected = 'red'}
		></button>
	{/each}
</div>

Những biểu thức (điển hình như colors) có thể là một mảng hoặc một object dạng mảng (có thuộc tính length). Bạn có thể với đi qua từng giá trị của nó với each [...đoạn lặp].

Bây giờ ta phải dùng biến color thay cho "red":

App.svelte
<div>
	{#each colors as color}
		<button
			aria-current={selected === color}
			aria-label={color}
			style="background: {color}"
			on:click={() => selected = color}
		></button>
	{/each}
</div>

Ta cũng có thể lấy số thứ tự qua tham số thứ hai như thế này:

App.svelte
<div>
	{#each colors as color, i}
		<button
			aria-current={selected === color}
			aria-label={color}
			style="background: {color}"
			on:click={() => selected = color}
		>{i + 1}</button>
	{/each}
</div>

Tiếp theo: Khối Each có khoá

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script>
	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
	let selected = colors[0];
</script>
 
<h1 style="color: {selected}">Chọn một màu</h1>
 
<div>
	<button
		aria-current={selected === 'red'}
		aria-label="red"
		style="background: red"
		on:click={() => selected = 'red'}
	></button>
 
	<button
		aria-current={selected === 'orange'}
		aria-label="orange"
		style="background: orange"
		on:click={() => selected = 'orange'}
	></button>
 
	<button
		aria-current={selected === 'yellow'}
		aria-label="yellow"
		style="background: yellow"
		on:click={() => selected = 'yellow'}
	></button>
 
	<!-- TODO add the rest of the colours -->
	<button></button>
	<button></button>
	<button></button>
	<button></button>
</div>
 
<style>
	h1 {
		transition: color 0.2s;
	}
 
	div {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-gap: 5px;
		max-width: 400px;
	}
 
	button {
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color, #fff);
		transform: translate(-2px,-2px);
		filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
		transition: all 0.1s;
	}
 
	button[aria-current="true"] {
		transform: none;
		filter: none;
		box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
	}
</style>
initialising