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


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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 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
推荐一篇入门级的Class文章
2007/03/19 PHP
php 页面执行时间计算代码
2008/12/04 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP生成plist数据的方法
2015/06/16 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
jquery提交form表单简单示例分享
2014/03/03 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
年终自我鉴定
2013/10/09 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
SQL基础的查询语句
2021/11/11 MySQL
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js