小程序数据绑定与事件绑定
1.如何定义页面数据。
小程序中每个页面,又四个部分,其中js文件内可以定义页面的数据,生命周期函数,其他业务逻辑。
如果要在.js文件内定义页面的数据,只需把数据定义到data节点下即可。
Page({ data:{ msg:'hello word' } })
2.数据绑定:
把data中的数据绑定到页面中渲染,使用双大括号,将变量包起来即可。
语法格式为:
<view>{{msg}} </view>
双大括号语法的主要应用场景:绑定内容,绑定属性,运算(三元表达式,算数运算,逻辑判断,字符串运算,数据路径运算)
3.属性绑定:
<view id="item-{{id}}" ></view> Page({ data:{ id:"23423424" } })
4.运算:
<view>{{ flag ? "1" :"0" }}</view>
事件绑定:
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当组件书法事件,就会执行逻辑层中对应的事件处理函数。
bindtap绑定触摸事件:
bindtap:触摸事件
在小程序中,不存在网页中的click鼠标点击事件,而是通过bindtap事件来响应触摸行为。
1.通过bindtap, 可以为组件绑定触摸事件,语法如下:
<view bindtap="tapName">Click Me!</view>
2.在相应的Page定义中写上相应的事件处理函数,事件参数是event
Page({ tapName: function (event) { console.log(event) } })
bindinput : 文本框输入事件
在小程序中,通过input 事件来响应文本框的输入事件。
1.通过bindinput,可以为文本框绑定输入事件,语法如下:
<input bindinput="inputName"></input>
2.在相应的Page定义中写上相应的事件处理函数,事件参数是event
Page({ inputName: function (event) { console.log(event) } })
data和文本框之间数据同步:(有点像React的操作方法)
在vue中通过v-model 可以很方便的将数据双向绑定。而在微信中并没有这样的数据双向绑定,要想使数据双向绑定,需要手动的通过文本框的输入事件绑定到data中。
绑定方法:
1.监听文本框的数据变化
在文本框的input事件处理函数中,通过事件参数event,能够访问到文本框的最新值。
语法: event.detail.value
示例代码:
inputName: function (event) { // 获取到文本框中的最新数据 console.log(event.detail.value) }
2.修改data中的数据
通过this.setData(dataObject) 方法,可以给页面中的data数据重新赋值。
例如:例如监听文本框的数据变化,并把最新的值复制给data中的msg
inputName: function (event) { this.setData({ msg: event.detail.value }) }
事件传参:
1.不能在绑定事件的同时传递参数
小程序的事件传参比较特殊,不能在为组件绑定事件函数的同时为事件处理函数传递参数。
例如: 下面的代码将不能正常工作:
<button bindtap="btnHandler(123)">按钮</button>
因为小程序会把bindtap 后面指定的值,统一当作事件名称来处理。
2.通过data-*自定义属性传参:
如果要在组件触发事件处理函数的时候,传递参数,可以为组件提供data- 自定义属性传参。
示例代码:
<button bindtap="btnHandle" data-info ="hello word" >按钮</button>
其中,info 会被当作参数名,数值123 会被当作参数值。
3. 获取data-* 自定义属性中传递的参数
通过事件参数event.target.dataset.参数名,能够获取data-* 自定义属性传递到事件处理函数中的参数。
示例代码:
btnHandle: function (evnet) { console.log(event.target.dataset.info) }
原文地址:https://www.cnblogs.com/liea/p/11801796.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5.01-requests_auth
- Git分支操作
- 5.02-requests_proxy
- 5.03-requests_ssl
- 5.04-requests_cookies
- 通过 Node.js 小示例学习浏览器缓存策略
- [未解决]报错: execjs._exceptions.ProgramError: TypeError: Cannot read property 'extend' of undefined
- 5.05-requests_cookies2
- 5.06-re
- Python3爬虫 利用百度地图api得到城市经纬度
- [未解决]报错: pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it's not in y
- 6.01-re-split_chinese
- Mac上安装tesseract-OCR
- 6.02-news_re
- 6.03-news_xpath2