微信小程序的数据监听器
一 什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下。
Component({
observers: {
'字段A, 字段B': function (字段A的新值, 字段B的新值) {
// do something
}
}
})
二 数据监听器的基本用法
1 组件的 UI 结构如下
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>
2 组件的 .js 文件代码如下
Component({
/**
* 组件的初始数据
*/
data: {
n1: 0,
n2: 0,
sum: 0
},
/**
* 组件的方法列表
*/
methods: {
addN1() {
this.setData({
n1: this.data.n1 + 1
})
},
addN2() {
this.setData({
n2: this.data.n2 + 1
})
}
},
observers: { // 数据监听数据
'n1, n2': function (newN1, newN2) { // 监听 n1 和 n2 的数据变化
this.setData({
sum: newN1 + newN2 // 通过监听器，自动计算 sum 的值
})
}
}
})
三 监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化，示例语法如下。
Component({
observers: {
'对象.属性A, 对象.属性B': function (属性A的新值, 属性B的新值) {
// 触发此监听器的 3 种情况
// 【为属性A赋值】 使用 setDate 设置 this.data.对象.属性A 时触发
// 【为属性B赋值】 使用 setDate 设置 this.data.对象.属性B 时触发
// 【直接为对象赋值】 使用 setDate 设置 this.data.对象 时触发
// do something...
}
}
})
微信小程序的数据监听器相关推荐
- 微信小程序observers数据监听器的使用
微信小程序observers数据监听器的使用 数据监听器可以用于监听和响应任何属性和数据字段的变化. 1.observers使用的前提条件 在微信小程序中数据监听器的使用是有几个前提条件的,否则是无法 ...
- 小程序素材抓取软件_如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
- 微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
- 微信小程序用户数据的签名校验和加解密 - 后端nodejs
在本文 微信小程序用户数据的签名校验和加解密 之前需要先看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. 小程序代码: ...
- 把jquery city-picker地区选择插件数据改成微信小程序省市地区数据一样（php代码抓取微信小程序地区数据）
原版插件 https://github.com/tshi0912/city-picker 资源下载 https://download.csdn.net/download/jianye112/12036 ...
- 如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
- 微信小程序 过滤html,微信小程序中数据过滤的实现方法介绍（代码）
本篇文章给大家带来的内容是关于微信小程序中数据过滤的实现方法介绍(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 因为微信小程序的wxml和js的内部实现机制是分开编译的.所 ...
- 微信小程序：数据存储、传值、取值
小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navig ...
- 《微信小程序》 数据访问实例详解
如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚 ...
最新文章
- Linux邻居子系统的细节之confirm-Open××× server模式的MAC地址学习
- Nginx的Gzip模块配置指令(二)
- 深港澳大湾区(深圳).NET技术交流会圆满成功
- 多普勒效应及多普勒频移的简单推导
- 肖仰华 | 知识图谱落地的基本原则与最佳实践
- 讯飞输入法将深度神经网络DNN技术应用于语音识别达到业界领先水平
- DFS csu1719 Boggle
- 车间调度建模系列8|扩展析取图之基于时间片段的赋时三维析取图模型
- 使用shell脚本实现二进制、十进制、十六进制转换
- win10电脑用命令行关机
- 记一次阿里云配置二级域名经历，及申请免费非工作用途SSL证书
- Simpson’s Rule （辛普森法则）
- 知物由学 | SO加固如何提升Android应用的安全性？
- pip install：Requirement already satisfied
- 华米科技：庇佑之下，黄汪难设温柔乡
- 关于编译报错“dereferencing pointer to incomplete type...
- Catherine 成长记第一篇
- ViewPager+Fragment添加一行若干小红球滚动指示器指示当前ViewPager翻阅位置（可供第三方使用的类）
- 数学学习与研究杂志数学学习与研究杂志社《数学学习与研究》杂志社2023年第2期目录
- 如何查询期刊是否是SCI期刊