编程 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效率一次判断,而不要次次判断

Mar 30 Javascript

解读JavaScript中 For, While与递归的用法

May 07 Javascript

jQuery插件 selectToSelect使用方法

Oct 02 Javascript

使用jquery提交form表单并自定义action的方法

May 25 Javascript

基于JavaScript实现右键菜单和拖拽功能

Nov 28 Javascript

javascript判断回文数详解及实现代码

Feb 03 Javascript

解决jQuery ajax动态新增节点无法触发点击事件的问题

May 24 jQuery

vue+vuex+axios实现登录、注册页权限拦截

Mar 09 Javascript

微信小程序分享功能之按钮button 边框隐藏和点击隐藏

Jun 14 Javascript

微信小程序 JS动态修改样式的实现方法

Dec 16 Javascript

VUE项目初建和常见问题总结

Sep 12 Javascript

微信浏览器左上角返回按钮监听的实现

Mar 04 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

用文本文件制作留言板提示（下）

2006/10/09 PHP

php设计模式 Delegation(委托模式)

2011/06/26 PHP

php实现文件下载更能介绍

2012/11/23 PHP

PHP实现上传图片到 zimg 服务器

2016/10/19 PHP

php+redis实现消息队列功能示例

2019/09/19 PHP

ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

2012/02/03 Javascript

简述Jquery与DOM对象

2015/07/10 Javascript

使用jQuery在移动页面上添加按钮和给按钮添加图标

2015/12/04 Javascript

学习Javascript面向对象编程之封装

2016/02/23 Javascript

深入理解jquery自定义动画animate()

2016/05/24 Javascript

jQuery遍历json的方法(推荐)

2016/06/12 Javascript

JS实现隐藏同级元素后只显示JS文件内容的方法

2016/09/04 Javascript

jquery点赞功能实现代码点个赞吧!

2020/05/29 jQuery

vue cli升级webapck4总结

2018/04/04 Javascript

Vue 获取数组键名的方法

2018/06/21 Javascript

Angular请求防抖处理第一次请求失效问题

2019/05/17 Javascript

微信小程序实现购物车功能

2020/11/18 Javascript

[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结

2014/07/10 DOTA

[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2

2018/06/03 DOTA

Python二分查找详解

2015/09/13 Python

python 快速把超大txt文件转存为csv的实例

2018/10/26 Python

Python检测数据类型的方法总结

2019/05/20 Python

Python 实现自动获取种子磁力链接方式

2020/01/16 Python

Python threading.local代码实例及原理解析

2020/03/16 Python

Python并发请求下限制QPS(每秒查询率)的实现代码

2020/06/05 Python

Pandas对每个分组应用apply函数的实现

2020/12/13 Python

用HTML5制作一个简单的弹力球游戏

2015/05/12 HTML / CSS

html5 移动端视频video的android兼容(去除播放控件、全屏)

2020/03/26 HTML / CSS

HTML5中的网络存储实现方式

2020/04/28 HTML / CSS

英国乡村时尚和宠物用品专家：Pet & Country

2018/07/02 全球购物

劳力士官方珠宝商：J.R. Dunn Jewelers

2018/09/29 全球购物

市级文明单位申报材料

2014/05/07 职场文书

源码分析Redis中 set 和 sorted set 的使用方法

2022/03/22 Redis

高通2023 年将发布高性能PC处理器

2022/04/29 数码科技

Python实现Matplotlib,Seaborn动态数据图

2022/05/06 Python

python中使用redis用法详解

2022/12/24 Redis