抖音开放平台Logo
开发者文档
小程序
控制台
  • 框架概述
  • 基础库
  • 逻辑层
  • 视图层
  • 自定义组件
  • 小程序配置
  • SJS 语法参考
  • 场景值
  • 错误码
  • npm 功能

    • TTML-数据绑定
    收藏
    我的收藏

    ​基础绑定​

    <view> {{ message }} </view>
    Page({
  data: {
    message: "Hello World!",
  },
});

    ​属性绑定（需要在双引号之内）​

    <view id="item-{{id}}"> </view>
    Page({
  data: {
    id: 0,
  },
});

    ​指令属性（控制渲染逻辑）​

    <view tt:if="{{condition}}"> </view>
    Page({
  data: {
    condition: true,
  },
});

    ​原生属性（需要在双引号之内）​

    <checkbox checked="{{false}}" />

    ​运算​

    可以在 {{}} 内进行简单的运算，支持的有如下几种方式：​

    ​三元运算​

    <view hidden="{{flag ? true : false}}"> Hidden </view>

    ​数运算​

    <view> {{a + b}} {{c}} ! </view>
<!-- 结果是3 hello ! -->
    Page({
  data: {
    a: 1,
    b: 2,
    c: "hello",
  },
});

    ​字符串运算​

    <view>{{"hello" + name}}</view>
    Page({
  data: {
    name: "world",
  },
});

    ​渲染对象属性​

    <view>{{object.key}} {{array[0]}}</view>
    Page({
  data: {
    object: {
      key: "Hello ",
    },
    array: ["World"],
  },
});

    ​逻辑控制​

    <view tt:if="{{length > 1}}"> </view>

    ​混合渲染​

    支持在 TTML 里面使用变量构建新结构。​

    ​数组​

    <view tt:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
    Page({
  data: {
    zero: 0,
  },
});

    ​对象​

    可以在 template 上定义 data 时使用。​
    <template is="objectCombine" data="{{foo: a, bar: b}}"></template>
    Page({
  data: {
    a: 1,
    b: 2,
  },
});
    ​注意：现在只支持在 template 上定义对象，在其它标签上这么写会报错。​
    也支持使用扩展运算符 ... 将对象展开。​
    <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
<!-- template到的data是： {a: 1, b: 2, c: 3, d: 4, e: 5} -->
    Page({
  data: {
    obj1: {
      a: 1,
      b: 2,
    },
    obj2: {
      c: 3,
      d: 4,
    },
  },
});

    ​常见语法错误​

    以下表达式都不支持，写了之后会导致程序编译失败。​
    <!-- 带有括号和函数调用 -->
<view>{{ (1) }}</view>
<view>{{ foo() }}</view>
<view>{{ a: function () {} }}</view>
<view tt:if="{{ a.indexOf('flag') > 2 }}"></view>
    ​