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

捕获浏览器关闭、刷新事件不同情况下的处理方法

Jun 02 Javascript

JS实现倒计时和文字滚动的效果实例

Oct 29 Javascript

javascript通过元素id和name直接取得元素的方法

Apr 28 Javascript

javascript实现图片延迟加载方法汇总(三种方法)

Aug 27 Javascript

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

Jan 26 Javascript

jquery遍历table的tr获取td的值实现方法

May 19 Javascript

jQuery实现点击行选中或取消CheckBox的方法

Aug 01 Javascript

ionic2 tabs 图标自定义实例

Mar 08 Javascript

ES6中箭头函数的定义与调用方式详解

Jun 02 Javascript

详解Chart.js轻量级图表库的使用经验

May 22 Javascript

浅谈React的最大亮点之虚拟DOM

May 29 Javascript

JS算法教程之字符串去重与字符串反转

Dec 15 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

Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)

2012/07/23 PHP

php导入大量数据到mysql性能优化技巧

2014/12/29 PHP

php中preg_match的isU代表什么意思

2015/10/01 PHP

php解决和避免form表单重复提交的几种方法

2016/08/31 PHP

php-fpm.conf配置文件中文说明详解及重要参数说明

2018/10/10 PHP

PHP校验15位和18位身份证号的类封装

2018/11/07 PHP

javascript之解决IE下不渲染的bug

2007/06/29 Javascript

JavaScript使用技巧精萃[代码非常实用]

2008/11/21 Javascript

SeaJS入门教程系列之SeaJS介绍（一）

2014/03/03 Javascript

jquery获取复选框被选中的值

2014/03/22 Javascript

jQuery学习笔记之 Ajax操作篇（一） - 数据加载

2014/06/23 Javascript

js实现微信分享代码

2020/10/11 Javascript

基于JS实现EOS隐藏错误提示层代码

2016/04/25 Javascript

JS控制FileUpload的上传文件类型实例代码

2016/10/07 Javascript

微信小程序登录的简单实现

2017/04/19 Javascript

原生JS实现日历组件的示例代码

2017/09/22 Javascript

vue组件父子间通信详解（三）

2017/11/07 Javascript

vue-cli3.0 脚手架搭建项目的过程详解

2018/10/19 Javascript

详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

2020/04/07 Javascript

node.js 如何监视文件变化

2020/09/01 Javascript

在Python的Django框架中使用通用视图的方法

2015/07/21 Python

Python scikit-learn 做线性回归的示例代码

2017/11/01 Python

win7下python3.6安装配置方法图文教程

2018/07/31 Python

解决pymysql cursor.fetchall() 获取不到数据的问题

2020/05/15 Python

2020版Python学习路线图(附学习资料)

2020/09/15 Python

Python学习工具jupyter notebook安装及用法解析

2020/10/23 Python

Python numpy大矩阵运算内存不足如何解决

2020/11/19 Python

英国伦敦的睡衣品牌：Asceno

2019/10/06 全球购物

Linux如何命名文件--使用文件名时应注意

2014/05/29 面试题

面包店的创业计划书范文

2014/01/16 职场文书

社区活动策划方案

2014/08/21 职场文书

群众路线剖析材料（四风）

2014/11/05 职场文书

2015年新农合工作总结

2015/03/30 职场文书

2015年事业单位办公室文员工作总结

2015/04/24 职场文书

Python爬虫数据的分类及json数据使用小结

2021/03/29 Python

MySQL创建高性能索引的全步骤

2021/05/02 MySQL