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


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 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
AngularJs表单验证实例详解
May 30 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
详解Typescript里的This的使用方法
Jan 08 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实现图片简单上传
2006/10/09 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php密码生成类实例
2014/09/24 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python中反射和描述器总结
2018/09/23 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python中什么是面向对象
2020/06/11 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
如何删除一个表里面的重复行
2013/07/13 面试题
办公室文员自荐书
2014/02/03 职场文书
助理政工师申报材料
2014/06/03 职场文书
作风年建设汇报材料
2014/08/14 职场文书
农行心得体会
2014/09/02 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL