首页 > 课堂 > 小程序 > 正文

微信小程序开发WXML数据绑定方法

2020-03-21 16:30:05
字体:
来源:转载
供稿:网友

微信WXML文件属于微信视图层显示文件,实际上是一段被微信封装过的H5代码,最终也是显示在微信界面上,它的动态数据来自对应Page的data数据。
例如:(在wxml中显示我的头像,对应于page中的data数据(userInfo)),最终显示效果如下图。

            微信小程序,小程序开发,WXML,数据绑定%20%20%20%20%20%20大师%20%20%20%20%20%20
//%20pages/start/index.jsPage({%20%20/**%20%20%20*%20页面的初始数据%20%20%20*/%20%20data:%20{%20%20%20%20userInfo:%20{}%20%20},})

如何使用:
需要将要显示的内容放入到双引号之内<img src="{{userInfo.avatarUrl}}" />
这里我们可以使用组件属性,控制属性,直接使用关键字,逻辑运算,三元运算,算数运算,字符串运算,数组,组合等等
例如:

当Page中的data数据有更改的时候,wxml就会更新上面的数据显示。

使用setData动态更新

this.setData({      tilesData: this.data.tilesData,      itemSize: itemSize,      score: 1,    });

我们可以直接使用this.data.itemSize = itemSize,这样设置会讲data中的itemSize变量的值更改,但是不会在wxml中显示出来,所以还需要setData,将需要变更的动态数据传递给wxml,wxml才会显示出来。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表