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


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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
整理一下常见的IE错误
Nov 18 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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开发GUI
2006/10/09 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
使用JS动态显示文本
2017/09/09 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Tornado 多进程实现分析详解
2018/01/12 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
浅谈python出错时traceback的解读
2020/07/15 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技