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


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高级编程的最佳实践详解
Mar 23 Javascript
JS继承用法实例分析
Feb 05 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
js如何打印object对象
Oct 16 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 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
一个改进的UBB类
2006/10/09 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python实现的矩阵类实例
2017/08/22 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
小学生综合素质评语
2014/04/23 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
银行委托书范本
2014/09/28 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
教师先进事迹材料
2014/12/16 职场文书
个人自荐书怎么写
2015/03/26 职场文书
大学生活感想
2015/08/10 职场文书