小程序中的setData的使用

小程序中的setData

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

示例代码：

index.wxml

<view>{{name}}</view>
<button bindtap="changeName"> Change name data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

index.js

// demo.js
Page({data: {name: 'jiqing',  num: 0,array: [{text: 'init data'}],object: {text: 'init data'}},changeName:function() {this.setData({name:'zhangsan'})console.log("点击了修改名称");console.log(this.data);},changeNum: function() {this.data.num = 1this.setData({num: this.data.num})},changeItemInArray: function() {// you can use this way to modify a danamic data paththis.setData({'array[0].text':'changed data'})},changeItemInObject: function(){this.setData({'object.text': 'changed data'});},addNewField: function() {this.setData({'newField.text': 'new data'})}})

这里的bindtap很有意思，绑定一个点击事件。

AppData可以方便的查看data数据，以及变化情况。

Wxml可以查看当前的数据情况。

Console可以查看日志，便于调试。

如果开启了调试模式，在Console中，还可以查看到启动的步骤。

出发了某个事件都会告诉你。

小程序中的setData的使用相关推荐

小程序中this.setData的使用和注意事项
前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正. ...
微信小程序中this.setData is not a function报错问题
微信小程序中this.setData is not a function报错问题新手在编写小程序时经常会遇到的一种错误. 新手在编写小程序时经常会遇到的一种错误. 在小程序中,通常我们用setDat ...
小程序中this.setData是什么啊
在小程序中,this.setData 是一个用于修改页面数据的函数.它的作用是将传入的对象的属性和值应用到小程序页面的数据对象上,并触发页面的重新渲染. 使用方法如下: this.setData({ ...
小程序中Cannot read property ‘setData‘ of undefined问题的解决
小程序中Cannot read property 'setData' of undefined问题的解决参考文章: (1)小程序中Cannot read property 'setData' of ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...
微信小程序中 setData 详解
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
js中怎么获取某个属性的值_小程序中 setData 详解
前言在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 webview),逻辑层(JavaScript),系统层(底层),在架构上,WebView和 JavascriptCore 都是独 ...
小程序中textarea层级最高的结局办法
在小程序中textarea层级比较高,当底部有fiexd定位的时候或出现文本框中的文本穿透显示出来,解决办法是在texarea标签下面添加一个view或者text标签来和texarea标签替换使用 & ...

小程序中的setData的使用

小程序中的setData的使用相关推荐

最新文章

热门文章