#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

#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_Else

The if_else syntax sugar allows users to conditionally render components. The component will only be rendered if the expression returns true.

#Syntax

1<label :if="$if_bind_condition"></label>
2$($(<label :else_if="$else_if_bind_condition"></label>)*)?
3$(<label else></label>)?

• $if_bind_condition: if conditional statement condition
• $else_if_bind_condition: else_if conditional statement condition
• $()*: many1, 1 or more
• $()?: recognize, 0 or 1

#Example

For specific writing and examples, see: if_sugar tests

#Only if

1<label :if="vis" text="'hello'"></label>

#if else

1<label :if="vis" text="'hello'"></label>
2<label else text="'world'"></label>

#if else_if else

1<label :if="is_a()" text="'Vis A'"></label>
2<label :else_if="is_b()" text="'Vis B'"></label>
3<label else text="'world'"></label>