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

注意:

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

方法如下:

js:

  1. Page({
  2. data: {
  3. text: 'init data',
  4. num: ,
  5. array: [{text: 'init data'}],
  6. object: {
  7. text: 'init data'
  8. }
  9. },
  10. changeText: function() {
  11. // this.data.text = 'changed data' // bad, it can not work
  12. this.setData({
  13. text: 'changed data'
  14. })
  15. },
  16. changeNum: function() {
  17. this.data.num =
  18. this.setData({
  19. num: this.data.num
  20. })
  21. },
  22. changeItemInArray: function() {
  23. // you can use this way to modify a danamic data path
  24. this.setData({
  25. 'array[0].text':'changed data'
  26. })
  27. },
  28. changeItemInObject: function(){
  29. this.setData({
  30. 'object.text': 'changed data'
  31. });
  32. },
  33. addNewField: function() {
  34. this.setData({
  35. 'newField.text': 'new data'
  36. })
  37. }
  38. })

wxml:

  1. <view>{{text}}</view>
  2. <button bindtap="changeText"> Change normal data </button>
  3. <view>{{num}}</view>
  4. <button bindtap="changeNum"> Change normal num </button>
  5. <view>{{array[0].text}}</view>
  6. <button bindtap="changeItemInArray"> Change Array data </button>
  7. <view>{{object.text}}</view>
  8. <button bindtap="changeItemInObject"> Change Object data </button>
  9. <view>{{newField.text}}</view>
  10. <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. python基础一 day6 序列操作集合

    列表删除:pop([index])有返回值 remove('元素‘)没有返回值 按元素删,元素是什么,就写什么,是数字就写数字,不要加引号,加引号就变成字符串了,没有就报错. 字典删除:pop( ’键 ...

  2. sql is null

    select * from a or state is null)

  3. vscode 中文设置

    修改设置 语言设置介绍: https://code.visualstudio.com/docs/getstarted/locales 按Ctrl + Shift + P打开命令调色板,然后开始键入“d ...

  4. CentOS7安装Tomcat9并配置

    划重点:安装tomcat之前必须先安装jdk  安装教程 1.下载 Tomcat 9 CentOS 7 下创建目录并下载文件:// 链接已更新 cd /usr/local/ mkdir tomcat ...

  5. PLSQL Developer连接数据库报错ora-12514解决

    连接本地数据库报以上错误,需要修改本地数据库的监听配置文件(如下所示:) 比如我的本地oracle数据库相关文件在E:\app\user\product\11.2.0\dbhome_1下 然后在E:\ ...

  6. 网易技术分享:Nginx缓存引发的跨域惨案

    推荐:更多技术团队分享文章 关注:MAYOU18技术专栏 1. 前言 贵金属wap版直播间上线后,偶尔有用户反馈,在进入wap直播间的时候,出现空白页面,但是重新刷新又可以正常显示了.我们曾一度认为是 ...

  7. 如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...

  8. [第一波模拟\day1\T2]{分班}(divide.cpp)

    [题目描述] 小N,小A,小T又大了一岁了. 现在,他们已经是高二年级的学生了.众所周知,高二的小朋友是要进行文理科分班考试的,这样子的话,三个好朋友说不定就会不分在一个班. 于是三个人决定,都考平均 ...

  9. .NET如何进行数据库连接

    在.net中连接sql server数据库,需引入System.Data.SqlClient命名空间: 1,最简单的连接方式: SqlConnection conn = new SqlConnecti ...

  10. linux find的用法

    ①.一般格式: ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; 说明: #-print 将查找到的文 ...