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


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 DOM元素尺寸和位置
Apr 13 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
javascript对象3个属性特征
Nov 17 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
js实现窗口全屏示例详解
2019/09/17 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python常用正则表达式符号浅析
2014/08/13 Python
Python实现备份文件实例
2014/09/16 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python线程池threadpool使用篇
2018/04/27 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
html5 标签
2009/07/16 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
消防器材管理制度
2014/01/28 职场文书
写给女朋友的保证书
2015/05/09 职场文书
联村联户简报
2015/07/21 职场文书