小程序之数据绑定

最新推荐文章于 2025-02-20 07:00:00 发布

原创最新推荐文章于 2025-02-20 07:00:00 发布 · 835 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

19 篇文章

订阅专栏

本文介绍了小程序中数据绑定的两种方式：一是通过初始数据在页面渲染时进行绑定；二是利用setData函数将逻辑层的数据同步到视图层。强调了直接修改this.data无效，必须使用setData的异步更新机制。并提供了修改个人信息的案例来展示setData的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 通过初始数据绑定

小程序页面第一次渲染的时候会使用初始数据和渲染层进行绑定，所谓的初始数据就是Page页面构造器中的data对象。

例如在page页面构造器中的data对象有以下数据：

Page({

  /**
   * 页面的初始数据
   */
    data: {
     name:'Trevor',
     age:23,
     sex:'boy'
  }
})

这样小程序会将初始数据绑定到对应的WXML中

<view>{{name}}</view>
<view>{{age}}</view>
<view>{{sex}}</view>

2 通过setData函数将数据从逻辑层发送到视图层

函数形式：

Page.prototype.setData(Object data, Function callback)

字段	类型	必填	描述	最低版本
data	Object	是	这次要改变的数据
callback	Function	否	setData引起的界面更新渲染完毕后的回调函数	1.5.0

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，因为setData 函数是异步的将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值，而this.date是不会将修改的数据传到视图层的。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB。

使用案例

修改个人信息，将

Trevor    lily

23   修改为为：    22

boy       girl

Page({

  /**
   * 页面的初始数据
   */
  data: {
   name:'Trevor',
   age:23,
   sex:'boy'
  },
  
  changeInfo:function(){
    this.setData({
      name: 'lily',
      age: 22,
      sex: 'girl'
    })
  }
})

在WXML中添加button，并绑定changeInfo事件

<button bindtap='changeInfo'>修改信息</button>
<view>{{name}}</view>
<view>{{age}}</view>
<view>{{sex}}</view>