微信小程序之数据双向绑定与数据操作

 更新时间:2017年05月12日 15:34:33   作者:道之道编程路  
这篇文章主要介绍了微信小程序之数据双向绑定与数据操作的相关资料,需要的朋友可以参考下

 微信小程序之数据双向绑定与数据操作

数据双向绑定是指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动态控制样式属性(使用这种方法控制样式只是为了实现拖拽列表,一般并不这样控制样式)

 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序动态的加载数据实例代码

    微信小程序动态的加载数据实例代码

    这篇文章主要介绍了 微信小程序动态的加载数据实例代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • TS 类型收窄教程示例详解

    TS 类型收窄教程示例详解

    这篇文章主要为大家介绍了TS 类型收窄教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JavaScript高级程序设计之基本引用类型

    JavaScript高级程序设计之基本引用类型

    这篇文章主要介绍了JavaScript高级程序设计之基本引用类型,引用值(对象)都是某个特定的引用类型的实例对象,例如 Date类型、Function类型,RegExp 正则表达式类型等等。JavaScript内置了一些常用的引用类型给开发者使用。下面来看看文章详细内容
    2021-11-11
  • 微信小程序 基础组件与导航组件详细介绍

    微信小程序 基础组件与导航组件详细介绍

    这篇文章主要介绍了微信小程序 基础组件与导航组件详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02
  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解

    这篇文章主要介绍了微信小程序本地缓存数据增删改查实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • JavaScript实现余额数字滚动效果

    JavaScript实现余额数字滚动效果

    这篇文章主要介绍了JavaScript实现余额数字滚动效果,将传入的带滚动的n位数字拆分成每一个要滚动的数,然后动态的创建装着滚动到每一位相应数字的容器,然后放入传入的目标容器中,更多详细内容,一起进入下面文章学习吧
    2021-12-12
  • 微信小程序 解析网页内容详解及实例

    微信小程序 解析网页内容详解及实例

    这篇文章主要介绍了微信小程序 解析网页内容详解及实例的相关资料,这里使用爬虫对复杂的网页进行抓取,遇到些问题,这里整理下并解决,需要的朋友可以参考下
    2017-02-02
  • 微信小程序 Flex布局详解

    微信小程序 Flex布局详解

    这篇文章主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • javascript 操作cookies详解及实例

    javascript 操作cookies详解及实例

    这篇文章主要介绍了javascript 操作cookies详解及实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • next.js源码解析getStaticProps getStaticPaths使用场景

    next.js源码解析getStaticProps getStaticPaths使用场景

    这篇文章主要为大家介绍了next.js源码解析getStaticProps getStaticPaths使用场景,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论