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


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实现颜色渐变的方法
Oct 30 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
Vue和React有哪些区别
Sep 12 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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 中文处理技巧
2010/04/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
JS 继承实例分析
2008/11/04 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
BootStrap中
2016/12/10 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
javascript实现抢购倒计时程序
2019/08/26 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
大学生实习鉴定评语
2014/04/25 职场文书
毕业生应聘求职信
2014/07/10 职场文书
旗帜观后感
2015/06/08 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python OpenGL基本配置方式
2022/05/20 Python