Giới thiệu

Khi mở một ứng dụng, bạn có muốn thấy cùng một nội dung bất kể bạn là ai hay đã làm gì không? Ví dụ:

Bạn đã đăng xuất? Vẫn thấy “Chào mừng trở lại!”.
Bạn đã đăng nhập? Vẫn thấy “Vui lòng đăng nhập.”.
Bạn đang chờ nội dung tải? Ứng dụng chỉ... nhìn bạn chằm chằm.

Điều này không tốt chút nào. Đó là lý do tại sao chúng ta cần kết xuất điều kiện: khả năng hiển thị (hoặc ẩn) các phần của giao diện người dùng (UI) tùy thuộc vào trạng thái hiện tại. Hãy tưởng tượng như ánh sáng sân khấu 🎭: chỉ có các diễn viên liên quan đến cảnh hiện tại mới được chiếu sáng.

Trong bài viết này, chúng ta sẽ khám phá:

Cách hiển thị một nội dung chỉ khi điều kiện đúng.
Cách thêm nhánh else.
Cách xử lý nhiều trường hợp với else if.
Cách lồng ghép điều kiện một cách cẩn thận.
Những điểm thường gặp mà bạn có thể gặp phải.

Và như thường lệ: không cần kiến thức trước. Mỗi ví dụ sẽ được giải thích đầy đủ, sẵn sàng sao chép và dán, với đường dẫn tệp được bao gồm.

Bước 1: Khối `{#if}`

Câu lệnh điều kiện đơn giản nhất chỉ là “nếu điều này đúng, thì hiển thị điều này.”

📂 src/lib/Welcome.svelte

svelte Copy

<script>
  let loggedIn = $state(false);
</script>

{#if loggedIn}
  <h1>Chào mừng trở lại!</h1>
{/if}

<button on:click={() => (loggedIn = !loggedIn)}>
  {loggedIn ? 'Đăng xuất' : 'Đăng nhập'}
</button>

📂 src/routes/+page.svelte

svelte Copy

<script>
  import Welcome from '$lib/Welcome.svelte';
</script>

<Welcome />

Phân tích 🪄

let loggedIn = $state(false);
Đây là “công tắc” nhỏ của chúng ta. Bắt đầu ở false, có nghĩa là “người dùng chưa đăng nhập.” Bởi vì đây là $state, giao diện sẽ tự động cập nhật mỗi khi nó thay đổi.
{#if loggedIn} ... {/if}
Chỉ chạy mã bên trong nếu điều kiện đúng. Nếu loggedIn là false, nó sẽ không hiển thị gì cả.
Nút <button>
Chuyển đổi loggedIn giữa true và false. Chúng ta thậm chí thay đổi nhãn nút bằng một phép toán điều kiện (loggedIn ? 'Đăng xuất' : 'Đăng nhập').

👉 Thử ngay: tải trang, nhấn nút. Nội dung <h1> xuất hiện và biến mất! Bạn vừa tạo ra giao diện người dùng động.

Bước 2: Thêm `{:else}`

Hiện tại, khi bạn đăng xuất, màn hình trở nên trống rỗng. Điều này giống như một người chủ tiệc chỉ chào đón những người mà họ biết — còn lại họ chỉ... nhìn bạn. Thật ngại.

Chúng ta có thể khắc phục điều này bằng {:else}:

📂 src/lib/Welcome.svelte

svelte Copy

<script>
  let loggedIn = $state(false);
</script>

{#if loggedIn}
  <h1>Chào mừng trở lại!</h1>
{:else}
  <h1>Vui lòng đăng nhập</h1>
{/if}

<button on:click={() => (loggedIn = !loggedIn)}>
  {loggedIn ? 'Đăng xuất' : 'Đăng nhập'}
</button>

Phân tích 🧩

Hai nhánh, một kết quả.
Nếu loggedIn là true → hiển thị “Chào mừng trở lại!”.
Nếu không → hiển thị “Vui lòng đăng nhập.”.
Giao diện không bao giờ trống.
Luôn có một người ở điểm nổi bật — hoặc là người dùng đã đăng nhập hoặc người đã đăng xuất.

👉 Thử ngay: chuyển đổi nút và xem các thông điệp hoán đổi nhau.

Bước 3: `{:else if}` cho Nhiều Trường hợp

Cuộc sống không phải lúc nào cũng nhị phân. Đôi khi chúng ta cần ba hoặc nhiều trạng thái.

Ví dụ:

Trong khi dữ liệu đang tải → hiển thị “Đang tải…”.
Khi tải xong và người dùng đã xác thực → hiển thị “Chào mừng trở lại!”.
Nếu không → hiển thị “Vui lòng đăng nhập.”

📂 src/lib/AuthStatus.svelte

svelte Copy

<script>
  let status = $state('loggedOut');

  function setLoading() {
    status = 'loading';
    setTimeout(() => {
      status = 'loggedOut';
    }, 2000);
  }

  function login()  { status = 'loggedIn'; }
  function logout() { status = 'loggedOut'; }
</script>

{#if status === 'loading'}
  <p>Đang tải…</p>
{:else if status === 'loggedIn'}
  <p>Chào mừng trở lại!</p>
{:else}
  <p>Vui lòng đăng nhập.</p>
{/if}

<div style="margin-top: 1rem;">
  <button on:click={setLoading}>Đặt chế độ tải</button>
  <button on:click={login}>Đăng nhập</button>
  <button on:click={logout}>Đăng xuất</button>
</div>

Phân tích 🎛️

status = $state('loading')
Biến của chúng ta có thể chứa "loading", "loggedIn", hoặc "loggedOut".
{#if …} {:else if …} {:else}
Hoạt động giống như tín hiệu giao thông 🚦:
- Nếu đỏ (loading), hiển thị “Đang tải…”.
- Nếu xanh (loggedIn), hiển thị “Chào mừng trở lại!”.
- Nếu không (vàng = loggedOut), hiển thị “Vui lòng đăng nhập.”

👉 Thử ngay:

Nhấn “Đặt chế độ tải.” Bạn sẽ thấy “Đang tải…” trong 2 giây, sau đó nó chuyển sang “Vui lòng đăng nhập.”
Nhấn “Đăng nhập.” Giao diện bây giờ hiển thị “Chào mừng trở lại!”.
Nhấn “Đăng xuất.” Giao diện nói “Vui lòng đăng nhập.”

Bạn vừa thấy việc kết xuất điều kiện xử lý nhiều khả năng một cách xuất sắc.

Bước 4: Lồng ghép Điều kiện (cẩn thận)

Đôi khi điều kiện phụ thuộc vào hai điều cùng một lúc. Ví dụ:

Người dùng có đăng nhập không?
Và nếu có, họ có phải là quản trị viên không?

📂 src/lib/UserStatus.svelte

svelte Copy

<script>
  let loggedIn = $state(false);
  let isAdmin  = $state(false);

  function loginAsUser()  { loggedIn = true;  isAdmin = false; }
  function loginAsAdmin() { loggedIn = true;  isAdmin = true;  }
  function logout()       { loggedIn = false; isAdmin = false; }
</script>

{#if loggedIn}
  {#if isAdmin}
    <p>Chào mừng, quản trị viên vĩ đại!</p>
  {:else}
    <p>Chào mừng, người dùng bình thường.</p>
  {/if}
{:else}
  <p>Vui lòng đăng nhập.</p>
{/if}

<div style="margin-top: 1rem;">
  <button on:click={loginAsUser}>Đăng nhập với tư cách Người dùng</button>
  <button on:click={loginAsAdmin}>Đăng nhập với tư cách Quản trị viên</button>
  <button on:click={logout}>Đăng xuất</button>
</div>

Phân tích 🧩

Chúng ta theo dõi hai mảnh trạng thái: loggedIn và isAdmin.
Nếu không đăng nhập → hiển thị “Vui lòng đăng nhập.”
Nếu đã đăng nhập và là quản trị viên → hiển thị “Chào mừng, quản trị viên vĩ đại!”
Nếu đã đăng nhập nhưng không phải quản trị viên → hiển thị “Chào mừng, người dùng bình thường.”

👉 Analogy: Nó giống như một lối vào câu lạc bộ 🚪. Đầu tiên, nhân viên bảo vệ kiểm tra xem bạn có trong danh sách khách không (đăng nhập). Nếu có, họ kiểm tra thẻ VIP của bạn (quản trị viên). Tùy thuộc vào cả hai, bạn sẽ nhận được sự đối xử khác nhau.

⚠️ Cảnh báo: Việc lồng ghép các khối {#if} bên trong nhau có thể trở nên rối rắm rất nhanh. Nếu bạn thấy mình xếp chồng ba hoặc bốn lớp, có thể đã đến lúc cấu trúc lại mã của bạn (ví dụ: kết hợp điều kiện thành một biến duy nhất hoặc tách logic thành các thành phần nhỏ hơn).

Bước 5: Những điều cần lưu ý

Các câu lệnh điều kiện có vẻ đơn giản bề ngoài, nhưng người mới thường gặp phải những vấn đề giống nhau. Hãy cùng làm rõ chúng.

1) Giá trị đúng và sai

📂 src/lib/CounterCheck.svelte

svelte Copy

<script>
  let count = $state(0);
</script>

{#if count}
  <p>Count là số khác không: {count}</p>
{:else}
  <p>Count là số không</p>
{/if}

<button on:click={() => count++}>Tăng</button>

👉 Nhớ rằng: trong JavaScript, 0 là giá trị sai. Vì vậy, {#if count} sẽ không hiển thị cho đến khi count trở thành 1 hoặc nhiều hơn.

2) Tự động phản ứng

📂 src/lib/ToggleExample.svelte

svelte Copy

<script>
  let visible = $state(false);
</script>

{#if visible}
  <p>Bây giờ bạn có thể thấy tôi!</p>
{:else}
  <p>Bây giờ tôi bị ẩn.</p>
{/if}

<button on:click={() => (visible = !visible)}>
  Chuyển đổi
</button>

👉 Bạn không cần phải “ép buộc” một lần nữa kết xuất.
Khi visible thay đổi, Svelte tự động đánh giá lại {#if} và cập nhật DOM.

Hãy nghĩ về nó như một cái nhiệt độ 🌡️. Bạn không nói với bộ điều chỉnh nhiệt “kết xuất lại phòng!”. Bạn chỉ cần thay đổi cài đặt nhiệt độ, và hệ thống tự điều chỉnh.

3) Hiệu suất

Lo lắng về hiệu suất? Đừng lo (ít nhất là chưa). Svelte biên dịch các khối {#if} này thành mã siêu hiệu quả. Trừ khi bạn đang chuyển đổi hàng nghìn phần tử mỗi khung hình, bạn sẽ ổn.

Bước 6: Tóm tắt nhanh

Chúng ta đã bao quát rất nhiều điều! Hãy cùng xem lại:

{#if} → hiển thị một thứ chỉ khi điều kiện đúng.
{:else} → cung cấp một lựa chọn thay thế khi điều kiện sai.
{:else if} → xử lý nhiều khả năng theo trình tự.
Lồng ghép → có thể, nhưng giữ cho nó gọn gàng.
Những điều cần lưu ý → nhớ quy tắc đúng/sai và tin tưởng vào khả năng phản ứng của Svelte.

👉 Bức tranh lớn: kết xuất điều kiện làm cho giao diện của bạn nhận thức ngữ cảnh. Ứng dụng của bạn có thể phản ứng với thay đổi trạng thái và hiển thị đúng thứ vào đúng thời điểm.

Điều gì tiếp theo?

Chúng ta đã dạy ứng dụng của mình cách đưa ra quyết định. Nhưng đôi khi chúng ta không muốn chọn một thứ — chúng ta muốn kết xuất một danh sách các thứ.

Để làm điều đó, chúng ta sẽ cần vòng lặp. Và đó chính xác là điều chúng ta sẽ khám phá trong bài viết tiếp theo. 🚀

Bài viết tiếp theo: Vòng lặp trong Svelte — {#each}, Khóa và Xây dựng một Ứng dụng Todo.

Theo dõi tôi trên DEV để cập nhật các bài viết trong loạt bài này.
https://dev.to/a1guy
Nếu nó hữu ích, hãy để lại phản hồi (thích / đánh dấu) — điều này sẽ giữ cho tôi động lực để tạo thêm nội dung.
Xem các khóa học và nội dung trên YouTube của tôi về JavaScript, React, TypeScript, Rust, WebAssembly, Kỹ thuật yêu cầu AI và nhiều hơn nữa: @LearnAwesome

Câu lệnh điều kiện trong Svelte: Hướng dẫn chi tiết

Giới thiệu

Bước 1: Khối `{#if}`

Phân tích 🪄

Bước 2: Thêm `{:else}`

Phân tích 🧩

Bước 3: `{:else if}` cho Nhiều Trường hợp

Phân tích 🎛️

Bước 4: Lồng ghép Điều kiện (cẩn thận)

Phân tích 🧩

Bước 5: Những điều cần lưu ý

1) Giá trị đúng và sai

2) Tự động phản ứng

3) Hiệu suất

Bước 6: Tóm tắt nhanh

Điều gì tiếp theo?

Bình luận

Câu lệnh điều kiện trong Svelte: Hướng dẫn chi tiết

Giới thiệu

Bước 1: Khối {#if}

Phân tích 🪄

Bước 2: Thêm {:else}

Phân tích 🧩

Bước 3: {:else if} cho Nhiều Trường hợp

Phân tích 🎛️

Bước 4: Lồng ghép Điều kiện (cẩn thận)

Phân tích 🧩

Bước 5: Những điều cần lưu ý

1) Giá trị đúng và sai

2) Tự động phản ứng

3) Hiệu suất

Bước 6: Tóm tắt nhanh

Điều gì tiếp theo?

Bình luận

Bước 1: Khối `{#if}`

Bước 2: Thêm `{:else}`

Bước 3: `{:else if}` cho Nhiều Trường hợp