案例一:如果我们想动态的显示text文本里面的内容,就需要用到数据的绑定,数据绑定使用 Mustache 语法(双大括号)将变量包起来,以{{TEXT}}来标识的。如下用例:
{{text}}
我们编译时就会看不到文本内容,此时我们需要到newvip.js里面的data里面定义text的值
data:{ text:"这是www.html51.com的内容" },
编译后显示的结果如下:
同样的方法,在js页面:
data:{
在wxml页面上使用数据绑定如下:
{{text}}
编译后显示的结果就如下图所示:
如果我们希望点击后,text文本内容修改我们需要如何操作呢?很简单
btnClick: function() { console.log("按钮被点击了了...") this.setData({text:"这是新的51小程序内容"}) }
演示效果如下:
1.点击按钮后没有指定log打印出来,也没有错误提示。肉眼几乎看不出哪里有问题,其实是bindtap点击事件bindtap="btnClick"和>之间多了一个空格!
2.WXML 中的动态数据均来自对应 Page 的 data。
更多微信小程序:数据绑定讲解相关文章请关注PHP中文网!