微信小程序 动态修改页面数据及参数传递过程详解


Posted in Javascript onSeptember 27, 2019

在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下:

data: {
  array: [{ text: '数组' }]
 }

onLoad:function(){
this.data.array[0].text=1;

console.log(this.data.array[0].text);
}

微信小程序 动态修改页面数据及参数传递过程详解

修改代码:

onLoad:function(){
  // this.data.array[0].text=1;
  this.setData({
   'array[0].text': '1'
  })
  console.log(this.data.array[0].text);
 }

微信小程序 动态修改页面数据及参数传递过程详解

总结:修改data的数据有两种方法

1、直接用“=”赋值,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致。

2、this.setData,setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
vue实现表单录入小案例
Sep 27 #Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 #Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python实现simhash算法实例
2014/04/25 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Django分页功能的实现代码详解
2019/07/29 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
"序列点" 是什么
2016/07/29 面试题
中文专业学生自我评价范文
2014/02/06 职场文书
网络宣传方案
2014/03/15 职场文书
开业主持词
2014/03/21 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
python 中yaml文件用法大全
2021/07/04 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
python使用torch随机初始化参数
2022/03/22 Python