05. 数据绑定与更新

小程序中定义变量和函数几乎与vue一致。但有一点点区别

数据绑定

Page({

  data: {
    number : 0 
  }
 
});

定义数据需在Page下的data里面定义，而在模板中使用则和vue一致

{{ number }}

数据更新

现在以上面的代码为基础，增加一个功能。当点击div时，number的值不断累加。

<!--bindtap可以理解成click事件-->
<div bindtap='myClick'>
  {{number}}
</div>

然后增加一个myClick的函数

Page({
 
  data: {
    number : 0
  },
 
  myClick (){
    this.data.number++;
    console.log(this.data.number);
  }
 
});

这里和vue也很类似，不同的是：

1、方法不用写在methods里

2、不能直接this.number，需要this.data.number

运行后发现，控制台打印的number一直在累加，但是视图层并没有变化。这是因为小程序中，还需要调用一个setDate方法，把修改的值发送到视图层。如下 ：

Page({
 
  data: {
    number : 0
  },
 
  myClick (){
    this.data.number++;
    console.log(this.data.number);
 
    // 将计数后的值传递到视图层
    this.setData({
      "number": this.data.number
    });
  }
 
});

setDate方法接受的是一个json，里面是键值对。  该方法更多详细信息请参考： http://111.230.246.226:8080/article/204