微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)
来源:互联网 发布:ubuntu caffe 编辑:程序博客网 时间:2024/05/22 05:08
我们在正常的开发上,一般都比较少把视图层上面的数据写成固定形式的,很多都是通过动态获取数据时并更新页面上的数据显示出来
下面让我们来一些学习,如何动态修改视图层的数据
需求:创建一个按钮,点击这个按钮,改变视图层上面的数据
示例:
新建一个微信小程序的Hello World项目,找到index.wxml文件
index.wxml:使用一个<button>元素,使用bindtap事件作为点击事件
index.js:
在Page({})内,定义一Page个函数changeMotto,函数内部中使用关键字this,this代表对象,
调用setData()函数,里面传入一个Object对象作为参数,把motto的这个字符串变量,重新赋值为“你好 世界”
F5刷新运行项目:
点击按钮后,就改变了视图上的数据
总结:
在这个小程序开发中,我们只需要改变数据,视图就会作出相应的更新,这我angular JS的双向数据绑定是类似的。
我们不需要改视图的东西,即不用我们通过dom之类的操作,对视图进行更改。
0 0
- 微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)
- 微信小程序视图层的数据绑定 —— 微信小程序教程系列(9)
- 微信小程序视图层的列表渲染 —— 微信小程序教程系列(11)
- 微信小程序视图层的模板 —— 微信小程序教程系列(12)
- 微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列(10)
- 微信小程序的学习(3)-视图层WXML
- 微信小程序 -- 视图层的用法
- 小程序实战教程(5)—视图层WXML绑定数据、模板、逻辑
- 【微信小程序教程】动态修改标签的透明度
- 微信小程序的学习(4)-视图层WXSS
- 微信小程序的文件结构 —— 微信小程序教程系列(1)
- 微信小程序的生命周期实例演示 —— 微信小程序教程系列(2)
- 微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)
- 微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
- 微信小程序的作用域和模块化 —— 微信小程序教程系列(8)
- 微信小程序的网络请求 —— 微信小程序教程系列(14)
- 微信小程序的百度地图获取地理位置 —— 微信小程序教程系列(15)
- Two classes have the same XML type
- 100行C代码终端打印树形结构
- SDUTOJ 2173 数据结构实验之求二叉树后序遍历和层次遍历
- Radio+不可滑动的viewpager实现底部导航栏
- 1004_Median
- 微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)
- 2016总结
- 扩展neutron的数据库
- C++ ADO连接数据库出现无效指针错误
- 欢迎使用CSDN-markdown编辑器
- 反转字符串
- Graylog介绍
- android Window类的基本属性如下
- C++读取CPU序列号