Syntax Sugar

This doc describes the use of built-in component prop syntax sugar in GenUI

For

for syntax sugar allows users to quickly build iterable component templates through the passed iterator

Syntax

1<label :for="($($index)?, $item) in $iter_ident"></label>

The followings are details:

  1. :for="($index, $item) in $iter_ident"
  2. :for="$item in $iter_ident"
  3. :for="($index, ($item1, $item2, ...)) in $iter_ident"
  4. :for="($index, ()) in $iter_ident"
  5. :for="($index, _) in $iter_ident"
  • $index: index
  • $item: iterator element
  • $iter_ident: iterator ident

Examples

DANGER

When using syntax sugar, you need to bind the id just like the bind type

We plan to introduce an automatic id strategy in the v0.1.3 version (automatically generate an id for each component that does not have an id added during static compilation)

Single for

1<label id="mv_label" :for="item in label_list" :text="item"></label>

Nested use

1<view id="my_view" :for="item in label_list">
2    <label id="mv_label" :text="item"></label>
3</view>

Nested for

1<view id="mv_view" :for="(index, item) in label_list">
2    <label id="mv_label" :for="item1 in item[index]" :text="item1"></label>
3</view>

If_ElseIf_ElseComming Soon