编程 Javascript

微信小程序之数据双向绑定与数据操作

Posted in Javascript onMay 12, 2017

微信小程序之数据双向绑定与数据操作

数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化，当然html部分数据发生变化js部分数据也会发生变化，从而使界面很方便的实现动态数据显示，一般拥有数据双向绑定的前端框架都为mvvm结构。数据双向绑定是个好东西，an1 an2 vue 也都有数据双向绑定的机制，而且基本都差不多，抄来抄去嘛！！下面以一个列表为例子来说下数据双向绑定及数据的操作。

1.把要进行数据双向绑定的属性放在page的data里，然后在html里使用{{属性名}}即可进行数据显示；

2.that.setData({ synctable:res.data.data.list }); 使用setData方法给synctable:res赋值并更新界面相应数据。

3.for(var i=0;that.data.synctable.length>i;i++){ that.data.synctable[i].top=i*40; } 使用 that.data.synctable取到data里的synctable值然后添加上top新字段，然后使用style="top:{{item.top}}px;" 即可在js动态控制样式属性（使用这种方法控制样式只是为了实现拖拽列表，一般并不这样控制样式）

微信小程序之数据双向绑定与数据操作

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序之数据双向绑定与数据操作

- Author -

道之道编程路

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript高级程序设计错误处理与调试学习笔记

Sep 10 Javascript

缓动函数requestAnimationFrame 更好的实现浏览器经动画

Dec 07 Javascript

JQuery 图片滚动轮播示例代码

Mar 24 Javascript

对JavaScript客户端应用编程的一些建议

Jun 24 Javascript

jQuery实现带渐显效果的人物多级关系图代码

Oct 16 Javascript

详解JavaScript函数对象

Nov 15 Javascript

jQuery实现的AJAX简单弹出层效果代码

Nov 26 Javascript

jQuery实现Select左右复制移动内容

Aug 05 Javascript

JavaScript变量类型以及变量作用域详解

Aug 14 Javascript

解决微信小程序中转换时间格式IOS不兼容的问题

Feb 15 Javascript

在vue中使用Echarts利用watch做动态数据渲染操作

Jul 20 Javascript

vue 监听 Treeselect 选择项的改变操作

Aug 31 Javascript

Flask中获取小程序Request数据的两种方法

May 12 #Javascript

关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

May 12 #Javascript

微信小程序支付功能实现PHP实例详解

May 12 #Javascript

深入理解JavaScript继承的多种方式和优缺点

May 12 #Javascript

JS实现图片预加载之无序预加载功能代码

May 12 #Javascript

详解React开发中使用require.ensure()按需加载ES6组件

May 12 #Javascript

vue学习笔记之指令v-text && v-html && v-bind详解

May 12 #Javascript

You might like

Terran历史背景

2020/03/14 星际争霸

Php Image Resize图片大小调整的函数代码

2011/01/17 PHP

PHP中删除变量时unset()和null的区别分析

2011/01/27 PHP

PHP高自定义性安全验证码代码

2011/11/27 PHP

使用phpQuery采集网页的方法

2013/11/13 PHP

分享最受欢迎的5款PHP框架

2014/11/27 PHP

Windows下编译PHP5.4和xdebug全记录

2015/04/03 PHP

php基于闭包实现函数的自调用(递归)实例分析

2016/11/11 PHP

PHP架构及原理知识点详解

2019/12/22 PHP

jquery 模拟类搜索框自动完成搜索提示功能(改进)

2010/05/24 Javascript

jQuery实现自定义事件的方法

2015/04/17 Javascript

Vue.use源码分析

2017/04/22 Javascript

轻松解决JavaScript定时器越走越快的问题

2019/05/13 Javascript

构建大型 Vue.js 项目的10条建议(小结)

2019/11/14 Javascript

前端开发基础javaScript的六大作用

2020/08/06 Javascript

Python实现打印螺旋矩阵功能的方法

2017/11/21 Python

python实现ID3决策树算法

2017/12/20 Python

wxPython之解决闪烁的问题

2018/01/15 Python

Python下载网络文本数据到本地内存的四种实现方法示例

2018/02/05 Python

Python面向对象类继承和组合实例分析

2018/05/28 Python

Django migrations 默认目录修改的方法教程

2018/09/28 Python

简单了解django缓存方式及配置

2019/07/19 Python

详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件

2019/08/23 Python

浅谈在django中使用redirect重定向数据传输的问题

2020/03/13 Python

Python响应对象text属性乱码解决方案

2020/03/31 Python

使用keras2.0 将Merge层改为函数式

2020/05/23 Python

python安装和pycharm环境搭建设置方法

2020/05/27 Python

罗技英国官方网站：Logitech UK

2020/11/03 全球购物

商务英语求职自荐信范文

2013/12/24 职场文书

你的创业计划书怎样才能打动风投

2014/02/06 职场文书

党员四风剖析材料

2014/08/27 职场文书

县委班子四风对照检查材料思想汇报

2014/09/29 职场文书

专升本学生毕业自我鉴定

2014/10/04 职场文书

2014年审计人员工作总结

2014/12/19 职场文书

蓬莱阁导游词

2015/02/04 职场文书

小学生暑假生活总结

2015/07/13 职场文书