小程序之数据绑定

除了上篇讲过的两种数据绑定方法：

1. 直接修改text内容
2. 在js文件中添加text指定内容

本篇将进一步学习如何控制数据绑定及其动态变化。
·

查看数据动态变化

1. 以按钮为例，为其绑定数据，查看事件变化。

//wxml文件
<button type="default" bindtap="butonclik"> default </button>

//js文件附加代码（除本身代码外）
butonclik : function(){
   console.log("内容已点击")
 }

效果图：

点击两次按钮：

2. 以按钮为例，为其绑定数据，查看内容变化

//wxml文件
<button type="default" bindtap="butonclik"> default </button>
<text>{{text}}</text>

//js文件
// pages/first/first_demo.js
Page({

/**
 * 页面的初始数据
 */
data: {
  text : "旧的内容"

},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {

},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function () {

},

/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {

},

/**
 * 生命周期函数--监听页面隐藏
 */
onHide: function () {

},

/**
 * 生命周期函数--监听页面卸载
 */
onUnload: function () {

},

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {

},

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {

},

/**
 * 用户点击右上角分享
 */
onShareAppMessage: function () {

},

butonclik : function(){
  console.log("内容已点击")

  this.setData({text:"新的内容"})
}
})

效果图：

按下按钮：

其他注意事项

1. 第一个界面取决于外部文件json的pages配置顺序，如下图：