小程序之数据绑定

本文介绍了小程序中数据绑定的两种方式:一是通过初始数据在页面渲染时进行绑定;二是利用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)

字段类型必填描述最低版本
dataObject这次要改变的数据 
callbackFunctionsetData引起的界面更新渲染完毕后的回调函数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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值