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


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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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除数取整示例
2014/04/24 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP正则验证Email的方法
2015/06/15 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
django model object序列化实例
2020/03/13 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python 元组和列表的区别
2020/12/30 Python
10个顶级Python实用库推荐
2021/03/04 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
学生励志演讲稿
2014/01/06 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
电子工程求职信
2014/07/17 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
法律服务所工作总结
2015/08/10 职场文书
《检阅》教学反思
2016/02/22 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js