Conditions and loops

In the previous page you used data, *input, and a small counter. This time you will:

• show or hide blocks with *if / *elseif / *else,
• and render a list with *for.

Conditional message

This example shows how *if, *elseif, and *else form a chain. Only one branch is shown at a time.

Code

<serc-rod data='{"status":"ok"}'>
	<p *if="status === 'ok'">Everything is fine.</p>
	<p *elseif="status === 'warn'">Something needs attention.</p>
	<p *else>Something is wrong.</p>
</serc-rod>

Sample

You can change status in the data attribute (for example, to "warn") and reload the page to see a different branch.

Loop over a list

Next, use *for to render each item in an array with the same HTML structure.

Code

<serc-rod data='{"items":["Attribute-first","Tiny runtime","SSG / SSR friendly"]}'>
	<ul>
		<li *for="item of items">%item%</li>
	</ul>
</serc-rod>

Sample

The directive *for="item of items" takes each value from items and makes it available as item while rendering the <li>.

Next: Basic form controls

After conditions and loops, the next step is to look at basic form patterns such as radio, checkbox, select and multi select.

Next: Basic form controls