语法糖

本篇讲述GenUI中内置组件属性语法糖的使用

For

for语法糖允许使用者快速的通过传入的迭代器构建可迭代的组件模版

语法

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

具体写法如下:

  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:索引
  • $item:迭代元素
  • $iter_ident:迭代器

例子

单个

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

嵌套引用

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

嵌套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

if_else语法糖允许使用者条件性地渲染组件。该组件只会在表达式返回true时才被渲染。

语法

1<label :if="$if_bind_condition"></label>
2$($(<label :else_if="$else_if_bind_condition"></label>)*)?
3$(<label else></label>)?
  • $if_bind_condition: if条件语句条件
  • $else_if_bind_condition: else_if条件语句条件
  • $()*: many1,1 个或多个
  • $()?: recognize,0 个或 1 个
NOTE

其中$($(<label :else_if="$else_if_bind_condition"></label>)*)?表示else_if可以有也可以没有,如果有也可以有多个

例子

具体写法与示例见: if_sugar tests

单个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>