微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)

本文介绍如何在微信小程序中动态修改视图层数据。通过一个按钮点击事件,触发数据更新,实现视图自动同步。无需手动操作DOM,类似于AngularJS的双向数据绑定。

我们在正常的开发上,一般都比较少把视图层上面的数据写成固定形式的,很多都是通过动态获取数据时并更新页面上的数据显示出来

下面让我们来一些学习,如何动态修改视图层的数据

需求:创建一个按钮,点击这个按钮,改变视图层上面的数据

示例:

新建一个微信小程序的Hello World项目,找到index.wxml文件

index.wxml:
使用一个<button>元素,使用bindtap事件作为点击事件


19956127-637f47bda6717257.png

index.js:
在Page({})内,定义一Page个函数changeMotto,函数内部中使用关键字this,this代表对象,
调用setData()函数,里面传入一个Object对象作为参数,把motto的这个字符串变量,重新赋值为“你好 世界”


19956127-1e25d0c717fd9d3a.png

F5刷新运行项目:
点击按钮后,就改变了视图上的数据
19956127-83416c53ef9adae0.png

19956127-ec99834acec5e974.png

总结:

在这个小程序开发中,我们只需要改变数据,视图就会作出相应的更新,这我angular JS的双向数据绑定是类似的。
我们不需要改视图的东西,即不用我们通过dom之类的操作,对视图进行更改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值