Mẫu Svelte: logic có điều kiện

Tìm hiểu cách làm việc với các mẫu trong Svelte và đặc biệt là cách sử dụng các điều kiện

Bất kỳ ngôn ngữ tạo khuôn mẫu nào tốt cho Web đều cung cấp cho bạn ít nhất 2 thứ: cấu trúc có điều kiện và vòng lặp.

Svelte không phải là ngoại lệ, và trong bài đăng này tôi sẽ xem xét các cấu trúc có điều kiện.

Bạn muốn có thể nhìn vào một giá trị / biểu thức và nếu điều đó trỏ đến giá trị true thì hãy làm điều gì đó, nếu điều đó trỏ đến giá trị sai thì hãy làm điều gì đó khác.

Svelte cung cấp cho chúng ta một bộ cấu trúc điều khiển rất mạnh mẽ.

Đầu tiên lànếu:

{#if isRed}
	<p>Red</p>
{/if}

Có một sơ hở{#if}và một cái kết{/if}. Đánh dấu mở đầu kiểm tra một giá trị hoặc tuyên bố là trung thực. Trong trường hợp nàyisRedcó thể là một boolean với mộttruegiá trị:

<script>
let isRed = true
</script>

Một chuỗi rỗng là sai, nhưng một chuỗi có một số nội dung là trung thực.

0 là sai, nhưng một số> 0 là đúng.

Giá trị booleantruetất nhiên là sự thật, vàfalselà giả dối.

Nếu đánh dấu mở đầu không được thỏa mãn (cung cấp giá trị giả), thì không có gì xảy ra.

Để làm điều gì đó khác nếu điều đó không hài lòng, chúng tôi sử dụngelsetuyên bố:

{#if isRed}
	<p>Red</p>
{:else}
	<p>Not red</p>
{/if}

Khối đầu tiên được hiển thị trong mẫu hoặc khối thứ hai. Không có lựa chọn nào khác.

Bạn có thể sử dụng bất kỳ biểu thức JavaScript nào vàoifđiều kiện khối, vì vậy bạn có thể phủ nhận một tùy chọn bằng cách sử dụng!nhà điều hành:

{#if !isRed}
	<p>Not red</p>
{:else}
	<p>Red</p>
{/if}

Bây giờ, bên trongelsebạn có thể muốn kiểm tra một điều kiện bổ sung. Đó là nơi{:else if somethingElse}cú pháp đi kèm:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else}
  <p>Not red nor green</p>
{/if}

Bạn có thể có nhiều khối trong số này, không chỉ một khối và bạn có thể lồng chúng. Đây là một ví dụ phức tạp hơn:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else if isBlue}
  <p>It is blue</p>
{:else}
  {#if isDog}
    <p>It is a dog</p>
  {/if}
{/if}

Tải xuống miễn phí của tôiSổ tay Svelte

Mẫu Svelte: logic có điều kiện

Tìm hiểu cách làm việc với các mẫu trong Svelte và đặc biệt là cách sử dụng các điều kiện

Các hướng dẫn nhỏ gọn hơn: