微信小程序：数据绑定讲解

案例一：如果我们想动态的显示text文本里面的内容，就需要用到数据的绑定，数据绑定使用 Mustache 语法（双大括号）将变量包起来，以{{TEXT}}来标识的。如下用例：

 default 
 primary 

{{text}}

我们编译时就会看不到文本内容，此时我们需要到newvip.js里面的data里面定义text的值

  data:{
    text:"这是www.html51.com的内容"
  },

编译后显示的结果如下：

同样的方法，在js页面：

  data:{

在wxml页面上使用数据绑定如下：

 default 
 {{btnText}} 

{{text}}

编译后显示的结果就如下图所示：

如果我们希望点击后，text文本内容修改我们需要如何操作呢？很简单

  btnClick: function() {
      console.log("按钮被点击了了...")

      this.setData({text:"这是新的51小程序内容"})
  }

演示效果如下：

1.点击按钮后没有指定log打印出来，也没有错误提示。肉眼几乎看不出哪里有问题，其实是bindtap点击事件bindtap="btnClick"和>之间多了一个空格！

 {{btnText}} 

2.WXML 中的动态数据均来自对应 Page 的 data。

更多微信小程序：数据绑定讲解相关文章请关注PHP中文网！