微信小程序--逻辑层与界面层

73 })

三.界面层–数据绑定

在程序的开发过程中,界面层提供一种模板机制,可以借助一种特殊的语法来完成数据的绑定,将动态的数据绑定到模板当中,最近将嵌入过后的数据显示到界面中,小程序中使用的是Mustache 语法(双大括号)语法:

1
2
3
7
8 { { message }}
9 { { person.name }} : { { person.age }}
10

1 // pages/demo/demo.js
2
3 Page({
4 //为页面提供数据,界面和逻辑之间的桥梁
5 data:{
6 message:“hello world”,
7 person:{
8 name: “张三”,
9 age:25
10 }
11 }
12 })

–数据绑定语法补充,除了在页面标签的内部我们会使用Mustache语法进行输出,在标签的内部,我们也可以使用Mustache语法:

1
2
3
7
8 { { message }}
9 { { person.name }} : { { person.age }}
10
14
15
16 { { ‘hello’ }}
17 { { 111 }}
18 { { 111 + 222 }}
19 { { 111 < 222 ? ‘yes’ : ‘no’ }}
20 { { true }}
21
24 复选框1
25 复选框2
26

四.列表渲染

在逻辑层中,很多的情况下都会是一个数组类型的数据(列表数据),那么此时在我们的界面层中就需要使用到列表渲染:

1
4 复选框1
5 复选框2
6
7
8
20
30
31 { { bbb + 1 }}:
32
33 { { item.name }} { { aaa.name }}
34
35
36
37
38
39
40 { { i }} * { { j }} = { { i * j }}
41
42
43
44
45

五.事件处理

1
3 点击

1 buttonTapHandle: function(e){
2 console.log(“点击按钮打印此条.”);
3 // console.dir()将一个对象以树状的形式打印到控制台,便于我们调试复杂对象
4 console.dir(e);
5 }

六.事件冒泡

1
4
5
6

1 innerHandler: function(){
2 console.log(“触发内部事件”);
3 },
4 outerHandler: fun

  • 25
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值