模板语法

标签语法

小程序或快应用都只允许使用内部组件规定的标签，若想在小程序中写 HTML 标签，或者有将快应用标签转为小程序标签等标签转换场景，okam提供了配置项来支持标签控制转换，让使用者可以在构建阶段将标签经模板被编译，转为被映射的标签；

如何转换，用户可根据项目情况及自身习惯，通过在配置文件中添加 component.template.transformTags 配置项进行定制化转换支持:

配置项具体写法，详见配置定义 component.template.transformTags。

数据绑定

  • 基础数据

和百度智能小程序、微信小程序原生绑定方式一致，使用{{}}包裹 data 中的属性，{{}}中支持的简单运算的类型。

  1. <view>{{name}}</view>
  • 动态属性

对于属性上的动态值，可以使用:指令绑定。动态值无需再用{{}}包裹

  1. <view :checked="dynamic"></view>
  • 控制属性

在指令if、elif、else、for上的数据无需 {{}} 包裹

  1. <view if="flag"></view>
  • 表达式

同百度智能小程序、微信小程序，且受限于它们，支持以下简单表达式：

— 数据访问(普通变量、属性访问)：name array[0] object.a

— 逻辑运算符：&& || !

— 算术运算: + - * / %

— 比较运算符: > < >= <= === == !== !=

— 条件运算符: 条件 ? 值1 : 值2

— 括号: (1 + 2) * 3

— 字符串: 'hello' "hi "+"okam"

— 数值: 1

— 布尔: true

— 字面量对象：如下

  1.    <view :data-a="{a: 1, b: 2}">普通对象</view>
  2.    <view :data-a="{foo, bar}">key和value相同的对象</view>
  3.    <view :data-b="{...object, e: 5}">带扩展运算符的对象</view>
  • 不支持

!> 不支持一次性插值语法（对应 Vue 的 v-once 指令）；

不支持原始 HTML（对应 Vue 的 v-html 指令）；

不支持调用函数（包括Javascript对象上的函数及在JS逻辑层代码method中声明的函数）；

不支持过滤器（可通过computed 实现）；

注意： 微信小程序 下，属性名长度不能超过 31 个字符，否则会报错。