一、数据绑定

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

1. 先在 index.js 文件里敲入 page，弹出以下代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

2. 在 data 中填入数据，例如：

  data: {
    name:"张三",
    age:22,
    arr:["aaa","bbb","ccc"],
    user:{
      name:"王五",
      sex:"男",
      age:33
    },
    picurl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1612138888,1794405442&fm=26&gp=0.jpg"
  },

3. index.wxml 中写入：

<view>我的名字是：{{name}}，年龄是：{{age}}</view>
<view>{{arr}}</view>
<view>{{user.name}}-{{user.age}}-{{user.sex}}</view>
<image src="{{picurl}}"></image>

效果图如下所示：

二、条件渲染

<view wx:if="{{day == 1}}">周1</view>
<view wx:elif="{{day == 2}}">周2</view>
<view wx:elif="{{day == 3}}">周3</view>
<view wx:elif="{{day == 4}}">周4</view>
<view wx:elif="{{day == 5}}">周5</view>
<view wx:elif="{{day == 6}}">周6</view>
<view wx:elif="{{day == 7}}">周7</view>
<view wx:else>格式错误</view>

  data: {
    day:2,
  },

三、列表渲染

1. wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 。

<view>
  <view class="item" wx:for="{{arr}}">{{index+1}}--{{item}}</view>
</view>

也可以：

<view wx:for="{{[111,222,333]}}">{{item}}</view>

2. wx:for-item wx:for-index

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名。

<view>
  <view class="item" wx:for="{{arr}}" wx:for-index="i" wx:for-item="itemName">{{i+1}}--{{itemName}}</view>
</view>

3. wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

wx:key 的值以两种形式提供：

• 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

例：

将 data 值改为：

data: {
    listArr:[
      {
        id:1,
        title:"lalala",
        time:"2020-01"
      },
      {
        id:2,
        title:"hahaha",
        time:"2020-02"
      },
      {
        id:3,
        title:"xixixi",
        time:"2020-03"
      }
    ]
  },

index.wxml代码：

<view class="item" wx:for="{{listArr}}" wx:key="{{item.id}}">
  <text>{{item.title}}</text>
  <text>{{item.time}}</text>
</view>

效果：