4 Block structures

This chapter covers

  • Conditional logic in HTML with #if
  • Iteration in HTML with #each
  • Waiting on promises in HTML with #await

There are three common approaches to adding conditional and iteration logic in the markup of various web frameworks. React uses JSX ( JavaScript XML) where logic is implemented by JavaScript code in curly braces (https://reactjs.org/docs/ introducing-jsx.html). Angular and Vue support framework-specific attributes for logic. For example, Angular supports ngIf and ngFor, while Vue supports v-if and v-for. Svelte supports a Mustache-like (https://mustache.github.io/) custom syntax that wraps HTML and the components to render.

There are only three kinds of block structures in Svelte:

  • if is used to specify ...

Get Svelte and Sapper in Action now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.