微信小程序 绑定数据

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

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

问题描述

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

解决方案

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

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

创建好项目后，清空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

实习编辑 | 王文星

责 编| 赵 微