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


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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
JS数组方法join()用法实例分析
Jan 18 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript实现网页字符定位的方法
2015/07/14 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python实现IOU计算案例
2020/04/12 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
shell的种类有哪些
2015/04/15 面试题
司机检讨书
2014/02/13 职场文书
副总经理岗位职责
2015/02/02 职场文书