Skip to main content

Thậm chí bạn cũng có thể bind các thuộc tính bên trong một khối each.

App.svelte
{#each todos as todo}
	<li class:done={todo.done}>
		<input
			type="checkbox"
			bind:checked={todo.done}
		/>

		<input
			type="text"
			placeholder="Việc cần hoàn thành?"
			bind:value={todo.text}
		/>
	</li>
{/each}

Lưu ý: tương tác với các phần tử <input> này sẽ thay đổi mảng. Nếu bạn muốn làm việc với dữ liệu không thay đổi, bạn nên tránh các phép bind này và thay vào đó, sử dụng các hàm xử lý sự kiện.

Tiếp theo: Phần tử media

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
64
65
66
67
68
69
70
71
72
73
74
<script>
	let todos = [
		{ done: false, text: 'hoàn thành hướng dẫn svelte' },
		{ done: false, text: 'xây dựng ứng dụng' },
		{ done: false, text: 'thống trị thế giới' }
	];
 
	function add() {
		todos = todos.concat({
			done: false,
			text: ''
		});
	}
 
	function clear() {
		todos = todos.filter((t) => !t.done);
	}
 
	$: remaining = todos.filter((t) => !t.done).length;
</script>
 
<div class="centered">
	<h1>todos</h1>
 
	<ul class="todos">
		{#each todos as todo}
			<li class:done={todo.done}>
				<input
					type="checkbox"
					checked={todo.done}
				/>
 
				<input
					type="text"
					placeholder="Việc cần hoàn thành?"
					value={todo.text}
				/>
			</li>
		{/each}
	</ul>
 
	<p>{remaining} cò lại</p>
 
	<button on:click={add}>
		Thêm mới
	</button>
 
	<button on:click={clear}>
		Xóa việc đã hoàn thành
	</button>
</div>
 
<style>
	.centered {
		max-width: 20em;
		margin: 0 auto;
	}
 
	.done {
		opacity: 0.4;
	}
 
	li {
		display: flex;
	}
 
	input[type="text"] {
		flex: 1;
		padding: 0.5em;
		margin: -0.2em 0;
		border: none;
	}
</style>
initialising