微信小程序 绑定数据

欢迎点击「算法与编程之美」关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

“数据绑定”是前端框架技术中的一个概念,比如微信小程序开发中的数据绑定。那么为什么要进行数据绑定?如何进行数据绑定呢?

解决方案

数据绑定的作用就是为了实现一种动态的效果,即后台数据更新时前端页面也自动更新;前端页面上的数据更新时后台的数据也自动更新。这无疑可以使前端的开发更加高效。

下面就用实例来演示如何进行数据绑定:

创建好项目后,清空index下wxml,js,wxss文件下所有内容,进入App.json,修改导航栏标题。再在index.wxml进行界面布局,代码如下:

进入index.js,在data提供数据,代码如下:

进入index.wxml,将data提供的数据绑定到页面,代码如下:

进入index.wxss,将index.wxml添加样式,代码如下:

最终效果图:

结语

要熟悉小程序的开发流程,在js里提供数据,在wxml里绑定数据,在wxss里添加样式。将js里的data通过数据绑定的方式就可以在wxml里通过双大括号的方式将数据值显示出来,动态地加载数据,以实现数据绑定的动态效果。

END

实习编辑 | 王文星

责 编| 赵 微

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200120A007Q300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动