编程 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 02 Javascript

对之前写的jquery分页做下升级

Jun 19 Javascript

Jquery仿IGoogle实现可拖动窗口示例代码

Aug 22 Javascript

JavaScript charCodeAt方法入门实例（用于取得指定位置字符的Unicode编码）

Oct 17 Javascript

JavaScript学习笔记之定时器

Jan 22 Javascript

javascript转换静态图片，增加粒子动画效果

May 28 Javascript

详解AngularJS中的作用域

Jun 17 Javascript

浅谈js中的in-for循环

Jun 28 Javascript

JS图片等比例缩放方法完整示例

Aug 03 Javascript

JavaScript 判断iPhone X Series机型的方法

Jan 28 Javascript

nuxt.js添加环境变量,区分项目打包环境操作

Nov 06 Javascript

解决vuex刷新数据消失问题

Nov 12 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

手把手教你使用DedeCms的采集的图文教程

2007/03/11 PHP

解析php时间戳与日期的转换

2013/06/06 PHP

destoon实现调用当前栏目分类及子分类和三级分类的方法

2014/08/21 PHP

Laravel 5框架学习之模型、控制器、视图基础流程

2015/04/08 PHP

PHP里面把16进制的图片数据显示在html的img标签上(实现方法)

2017/05/02 PHP

js 禁止选择功能实现代码(兼容IE/Firefox)

2010/04/23 Javascript

DOM_window对象属性之--clipboardData对象操作代码

2011/02/03 Javascript

jQuery Ajax 实例全解析

2011/04/20 Javascript

ComboBox 和 DateField 在IE下消失的解决方法

2013/08/30 Javascript

js实现幻灯片效果(基于jquery插件)

2013/11/05 Javascript

Google官方支持的NodeJS访问API，提供后台登录授权

2014/07/29 NodeJs

用javascript将数据导入Excel示例代码

2014/09/10 Javascript

jQuery的context属性用法实例

2014/12/27 Javascript

setinterval()与clearInterval()JS函数的调用方法

2015/01/21 Javascript

Angularjs全局变量被作用域监听的正确姿势

2016/02/06 Javascript

node-http-proxy修改响应结果实例代码

2016/06/06 Javascript

javascript 数组的正态分布排序的问题

2016/07/31 Javascript

浅谈jquery采用attr修改form表单enctype不起作用的问题

2016/11/25 Javascript

jQuery插件artDialog.js使用与关闭方法示例

2017/10/09 jQuery

基于游标的分页接口实现代码示例

2018/11/12 Javascript

vue请求服务器数据后绑定不上的解决方法

2019/10/30 Javascript

微信小程序自定义弹出模态框禁止底部滚动功能

2020/03/09 Javascript

记一次react前端项目打包优化的方法

2020/03/30 Javascript

Python脚本实现Web漏洞扫描工具

2016/10/25 Python

django 解决manage.py migrate无效的问题

2018/05/27 Python

python 字符串和整数的转换方法

2018/06/25 Python

np.dot()函数的用法详解

2020/01/17 Python

pycharm 如何取消连按两下shift出现的全局搜索

2021/01/15 Python

HTML5 声明兼容IE的写法

2011/05/16 HTML / CSS

Hush Puppies澳大利亚官网：舒适的男女休闲和正装鞋

2019/08/24 全球购物

会计毕业生求职简历的自我评价

2013/10/20 职场文书

大家检讨书5000字

2014/02/03 职场文书

招商专员岗位职责

2014/02/08 职场文书

元旦联欢会主持词

2014/03/26 职场文书

企业环保标语

2014/06/10 职场文书

一文了解JavaScript用Element Traversal新属性遍历子元素

2021/11/27 Javascript