@polight/lego
Version:
Tiny Web Components lib for future-proof HTML mentors
33 lines (23 loc) • 593 B
Markdown
title: Loop :for
weight: 5
`:for` directive allows to repeat a tag based on a property.
The syntax is as follow: `:for="item in state.items"`.
The `item` value will be available trough `${item}` within the loop.
If you need an incremental index `i`, use `:for="item, i in state.items"`.
## Example
```html
<template>
<li :for="attendee in state.attendees">${attendee}</li>
</template>
<script>
export default class extends Lego {
state = { attendees: ['John', 'Mary'] }
}
</script>
```
Outputs:
```html
<li>John</li><li>Mary</li>
```