TTML

TTML 是用来编写页面结构用的标签语言。

主要包括下面一些特性:

数据绑定

<!--ttml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

列表渲染

<!--ttml-->
<view tt:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

条件渲染

<!--ttml-->
<view tt:if="{{view == 'A'}}"> A </view>
<view tt:elif="{{view == 'B'}}"> B </view>
<view tt:else="{{view == 'C'}}"> C </view>
// page.js
Page({
  data: {
    view: "A",
  },
});

模板

<!--ttml-->
<template name="staffName">
  <view> FirstName: {{firstName}}, LastName: {{lastName}} </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: { firstName: "大林", lastName: "斯" },
    staffB: { firstName: "吉尔", lastName: "丘" },
    staffC: { firstName: "福", lastName: "罗思" },
  },
});

事件

<!--ttml-->
<view bindtap="add"> {{count}} </view>
// page.js
Page({
  data: {
    count: 1,
  },
  add: function (e) {
    this.setData({
      count: this.data.count + 1,
    });
  },
});
点击纠错
评价此篇文档