微信小程序（学习十） -- WXML数据绑定

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

<!--pages/start/index.wxml-->
  <view class="userinfo">
    <view class="userinfo-avatar-group">
      <image src="{{userInfo.avatarUrl}}"></image>
      <text>大师</text>
    </view>
  </view>

// pages/start/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {}
  },
})

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

<button style='background:{{tilesData[index].color}};
width:{{itemSize.width - 2}}rpx;
height:{{itemSize.height-2}}rpx;
line-height: {{itemSize.height-2}}rpx;' 
data-id="{{index}}" 
disabled='{{!tilesData[index].enable}}' 
bindtap='clickMapItem'>
             {{tilesData[index].value == 0 ? "" : tilesData[index].value}} 
          </button>

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

使用setData动态更新

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

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