一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息

注意:

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
  2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

方法如下:

js:

Page({
data: {
text: 'init data',
num: ,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num =
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})

wxml:

<view>{{text}}</view>
<button bindtap="changeText"> Change normal 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>

微信小程序-setData()方法的更多相关文章

  1. 微信小程序setData()方法的详解以及对数组/json操作

    此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正! 直接进入正题! 一.setData()方法: 1.参数接受一个对象,以key,value的形式表示 ...

  2. 微信小程序 setData 的坑(转)

    最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text ...

  3. 微信小程序setData复杂数组的更新、删除、添加、拼接

    众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ ...

  4. 微信小程序setData的使用,通过[...]进行动态key赋值

    首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步), ...

  5. 微信小程序 setData 如何修改动态数据?

    最近这段时间在写微信小程序,有一个页面需要动态修改 data 中的数据,而这里似乎是个坑. 1.正常修改 正常修改很简单,当触发 change 事件时,数据和页面都会同时发生改变.这个也不用多说,很简 ...

  6. 小程序setData方法使用总结

    做了一下小程序setData使用方法总结,如有错误,请不吝指出,Thanks♪(・ω・)ノ  //示例data: data:{ user:'young', obj:{ name:'蓝色蒲公英', ag ...

  7. 微信小程序 setData动态修改数据数组的值

    1.问题说明 有一组数据,用来存储图片路径,动态修改图片的路径来上传图片,而小程序JS只能通过事件获取时机和setData方法修改数据来改变view. 而用这样写的方式明显是错误的 2.解决办法 字符 ...

  8. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  9. 微信小程序setData子元素

    页面的数据中如果有子元素,如下图nowQuestion中的deleted元素 在小程序的setData中,不能直接用nowQuestion.deleted来设定它的值,而需要再定义一个变量承接 另外, ...

随机推荐

  1. Perl: hash散列转换为Json报错集, perl.c,v $$Revision: 4.0.1.8 $$Date: 1993/02/05 19:39:30 $

    bash-2.03$ ./u_json.pl Can't locate object method "encode" via package "JSON" at ...

  2. CF633H Fibonacci-ish II

    题目描述 题解: 坑题搞了三天. 莫队+线段树. 还有一些和斐波那契数列有关的性质. 首先答案是$a_1f_1+a_2f_2+…+a_nf_n$, 考虑插进去一个元素对答案产生的影响. 比如插进去一个 ...

  3. [CF] 948A Protect Sheep

    A. Protect Sheep time limit per test1 second memory limit per test256 megabytes inputstandard input ...

  4. 数组合并--php

    常用的合并数组方法有以下几种: 1  array_merge 2  '+' 3  array_merge_recursive 下面是一段对比的代码 $array1 = array(2,4," ...

  5. 分分钟钟学会Python - 模块

    目录 模块 1 模块基础知识 2 random 返回随机生成的一个实数 3 hashlib 摘要算法模块 Hmac算法 4 time /datetime 时间模块 5 getpass 密码不显示(只能 ...

  6. POJ 3259 Wormholes(负权环路)

    题意: 农夫约翰农场里发现了很多虫洞,他是个超级冒险迷,想利用虫洞回到过去,看再回来的时候能不能看到没有离开之前的自己,农场里有N块地,M条路连接着两块地,W个虫洞,连接两块地的路是双向的,而虫洞是单 ...

  7. Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路

     Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路 先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...

  8. PTA 01-复杂度1 最大子列和问题 (20分)

    题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/709 5-1 最大子列和问题   (20分) 给定KK个整数组成的序列{ N_1N​1​ ...

  9. 《Shell脚本学习指南》书籍目录

    摘要:Shell脚本与Windows/Dos下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的.但是它比Windows下的批处理更 ...

  10. hdu 1325数据弱

    #include<stdio.h>//判断是否有环,判断是否有点,判断是否是一个父节点 #include<string.h> #define N 1000000 int pre ...