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


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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue+Element-ui实现分页效果
Nov 15 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
使用javascript插入样式
2016/03/14 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS验证不重复验证码
2017/02/10 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python计算一个文件里字数的方法
2015/06/15 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
办理护照介绍信
2014/01/16 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
安全责任书范文
2014/03/12 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
工作鉴定评语
2014/05/04 职场文书
应届大专生自荐书
2014/06/16 职场文书
见习报告格式要求
2014/11/04 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年大学社团工作总结
2015/04/09 职场文书