编程 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 相关文章推荐

JS获取IUSR_机器名和IWAM_机器名帐号的密码

Dec 06 Javascript

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

Jun 28 Javascript

Jquery工作常用实例使用AJAX使网页进行异步更新

Jul 26 Javascript

原生js结合html5制作简易的双色子游戏

Mar 30 Javascript

JQuery遍历DOM节点的方法

Jun 11 Javascript

jQuery焦点图轮播插件KinSlideshow用法分析

Jun 08 Javascript

js删除Array数组中指定元素的两种方法

Aug 03 Javascript

JS搜狐面试题分析

Dec 16 Javascript

Google 爬虫如何抓取 JavaScript 的内容

Apr 07 Javascript

vue v-on监听事件详解

May 17 Javascript

微信小程序授权登录及解密unionId出错的方法

Sep 26 Javascript

jQuery实现的解析本地 XML 文档操作示例

Apr 30 jQuery

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

PHP查询数据库中满足条件的记录条数(两种实现方法)

2013/01/29 PHP

php延迟静态绑定实例分析

2015/02/08 PHP

PHP中的socket_read和socket_recv区别详解

2015/02/09 PHP

PHP常用的三种设计模式

2017/02/17 PHP

php数据序列化测试实例详解

2017/08/12 PHP

关于javascript function对象那些迷惑分析

2011/10/24 Javascript

javascript返回顶部效果(自写代码)

2013/01/06 Javascript

jQuery中siblings()方法用法实例

2015/01/08 Javascript

jQuery EasyUI 入门必看

2016/06/03 Javascript

【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

2016/06/07 Javascript

轻松掌握JavaScript享元模式

2016/08/27 Javascript

javascript 注释代码的几种方法总结

2017/01/04 Javascript

vue-cli的工程模板与构建工具详解

2018/09/27 Javascript

浅析vue-router原理

2018/10/19 Javascript

React事件处理的机制及原理

2018/12/03 Javascript

vue二选一tab栏切换新做法实现

2021/01/19 Vue.js

[02:55]DOTA2英雄基础教程发条技师

2013/12/04 DOTA

python使用json序列化datetime类型实例解析

2018/02/11 Python

tensorflow1.0学习之模型的保存与恢复(Saver)

2018/04/23 Python

Python button选取本地图片并显示的实例

2019/06/13 Python

python seaborn heatmap可视化相关性矩阵实例

2020/06/03 Python

css3动画效果小结(推荐)

2016/07/25 HTML / CSS

HTML5对手机页面长按会粘贴复制禁用的解决方法

2016/07/19 HTML / CSS

html5调用摄像头功能的实现代码

2018/05/07 HTML / CSS

HTML5 CSS3打造相册效果附源码下载

2014/06/16 HTML / CSS

HTML5为输入框添加语音输入功能的实现方法

2017/02/06 HTML / CSS

英国儿童图书网站：Scholastic

2017/03/26 全球购物

马来西亚在线时尚女装商店：KEI MAG

2017/09/28 全球购物

临床医学应届生求职信

2013/11/06 职场文书

四年级科学教学反思

2014/02/10 职场文书

公司会计岗位职责

2014/02/13 职场文书

运动会通讯稿500字

2014/02/20 职场文书

骨干教师培训方案

2014/05/06 职场文书

2014年乡镇民政工作总结

2014/12/02 职场文书

如何写辞职信

2015/05/13 职场文书

《分数乘法》教学反思

2016/02/24 职场文书