小程序数据绑定

小程序数据绑定
小程序的数据绑定,想必只要是掌握了Vue.js,Angularjs,React.js等数据操作脚本的框架,学习起来并不是很难,并且上手很快。除了了解组件以及标签配置的差异性,其他的对照API,是很快就能创建出属于你的小程序的。

页面数据绑定(双花括号)将变量包起来如下: WXML {{ message }}js在头部data里面声明这个变量: js Page({ data: { message: 'Hello MINA!' } })//这里注意只要头部变量的值,改变,页面的值,就会跟着变化,小程序头部data里面的值一般以this.data."头部变量名称"的方法进行获取。如需要及时的更改页面数据可以。用小程序提供的以下方法:

this.setdata({
message:“你好,世界”
})
//这个值可以是变量,也可以是布尔值,塞值得时候同样可以做三运算,判断等操作。这个方法,用到的比较多,一定要牢记。再此,在透露一点,该方法的坑,也是我之前开发时候遇到。后来找到原因
小程序数据绑定
文章图片


很奇葩的一个坑,我检查了很多次代码,发现语法还有参数都是正确的,后来经过多方验证,
和小伙伴的帮助,原来,自己如果定义了方法,头部的数据通过this.data可能获取不到,这个时候我们在自己定义的方法里面就需要重新定义一下this:
var that = this
再通过that.data就可以取到。解决方式很简单,如果大家也遇到这样的错误,望谨慎入坑。
讲解只供理解,如需学习 请参考小程序数据绑定官方API:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
小程序数据循环展示
小程序里,数据的循环展示,也算是一个用的比较普遍的一个功能了,用处很大,实用简单,下面继续看代码:
//1.需要先创建一个循环体, 在开始循环的标签里写上循环的代码及循环方法wx:for="{{menus}}" , 写循环体的时候记得一定要写 wx:key="union"这个key是一定要写的,命名可以自己随意取,不写的画报错很烦. //2.、循环体里面可以给当前的循环体命名wx:for-item="item"这个命名可以自己定义,不定义的话默认是item .多层循环最好定义一下。不然很容易混淆,这个打印出来就是当前对象的下标。循环一个数组里面很多对象的时候,取值就可以用以下方法{{item.你的属性名}} 如下: //wxml文件 {{item.name}} {{item.en}}

【小程序数据绑定】以上是页面数据绑定的写法。
相对于js来说就简单的多。只要把要循环的数组,通过this.setData方法塞到对应得循环体里面,页面就会根据你的数据有几个对象,循环几次,并做出展示。(这里一定要注意你塞得循环体的层级,不然是没办法循环展示的哦)基本的列表循环就是这么实现的,详细解释可以去小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

    推荐阅读