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


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 非图片动态loading效果实现代码
Apr 09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
微信小程序实现日历效果
Dec 28 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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之密码加密的几种方式
2015/07/29 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
vue实现拖拽效果
2019/12/23 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python实现两款计算器功能示例
2017/12/19 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
大学生校园创业计划书
2014/02/08 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
python如何进行基准测试
2021/04/26 Python
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技