编程 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下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)

Oct 31 Javascript

解析javascript 数组以及json元素的添加删除

Jun 26 Javascript

JQuery实现鼠标移动到图片上显示边框效果

Jan 09 Javascript

jQuery统计指定子元素数量的方法

Mar 17 Javascript

jQuery的Read()方法代替原生JS详解

Nov 08 Javascript

textarea 在浏览器中固定大小和禁止拖动的实现方法

Dec 03 Javascript

Vue 实用分页paging实例代码

Apr 12 Javascript

对vue v-if v-else-if v-else 的简单使用详解

Sep 29 Javascript

Vue.js实现的购物车功能详解

Jan 27 Javascript

解决vue单页面修改样式无法覆盖问题

Aug 05 Javascript

vue + elementUI实现省市县三级联动的方法示例

Oct 29 Javascript

Vue.js使用axios动态获取response里的data数据操作

Sep 08 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

基于PHP实现数据分页显示功能

2016/05/26 PHP

MAC下通过改apache配置文件切换php多版本的方法

2017/04/26 PHP

php将从数据库中获得的数据转换成json格式并输出的方法

2018/08/21 PHP

chrome原生方法之数组

2011/11/30 Javascript

jquery实现带复选框的表格行选中删除时高亮显示

2013/08/01 Javascript

Jquery选中或取消radio示例

2013/09/29 Javascript

JS 打印界面的CSS居中代码适用所有浏览器

2014/03/19 Javascript

JavaScript中九种常用排序算法

2014/09/02 Javascript

JS如何实现文本框随文本的长度而增长

2015/07/30 Javascript

JS与jQuery遍历Table所有单元格内容的方法

2015/12/07 Javascript

javascript获取wx.config内部字段解决微信分享

2016/03/09 Javascript

BootStrap组件之进度条的基本用法

2017/01/19 Javascript

javascript基本数据类型和转换

2017/03/17 Javascript

js使用highlight.js高亮你的代码

2017/08/18 Javascript

Bootstrap实现可折叠分组侧边导航菜单

2018/03/07 Javascript

[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda

2014/05/21 DOTA

[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/17 DOTA

在Python中使用元类的教程

2015/04/28 Python

Python运维自动化之nginx配置文件对比操作示例

2018/08/29 Python

详解python项目实战:模拟登陆CSDN

2019/04/04 Python

Python3.5 Pandas模块之Series用法实例分析

2019/04/23 Python

Python K最近邻从原理到实现的方法

2019/08/15 Python

python程序线程队列queue使用方法解析

2019/09/23 Python

Win下PyInstaller 安装和使用教程

2019/12/25 Python

python tkinter之复选、文本、下拉的实现

2020/03/04 Python

Python使用socket模块实现简单tcp通信

2020/08/18 Python

css3遮罩层镂空效果的多种实现方法

2020/05/11 HTML / CSS

html5 canvas绘制放射性渐变色效果

2018/01/04 HTML / CSS

英国家居用品和家居装饰品购物网站：Cox & Cox

2019/08/25 全球购物

乐观大学生的自我评价

2014/01/10 职场文书

建筑工地门卫岗位职责

2014/04/30 职场文书

2014年煤矿工作总结

2014/11/24 职场文书

2014年组织委员工作总结

2014/12/01 职场文书

预备党员入党感想

2015/08/10 职场文书

创业计划书之婴幼儿游泳馆

2019/09/11 职场文书

导游词之山东红叶谷

2019/10/31 职场文书