位置: IT常识 - 正文

【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步(微信小程序怎么制作自己的小程序)

编辑:rootadmin
【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步

推荐整理分享【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步(微信小程序怎么制作自己的小程序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序制作,微信小程序在哪里找?,微信小程序在哪里找?,微信小程序开发平台,微信小程序开发一个多少钱,微信小程序怎么制作自己的小程序,微信小程序开发一个多少钱,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

文章目录数据绑定基本原则在data中定义数据Mustache语法Mustache语法的应用绑定内容绑定属性运算(三元运算、算术运算等)三元运算算数运算事件绑定什么是事件?常用事件事件对象属性target与currentTarget的区别bindtap语法格式在事件处理函数中为data赋值事件传参查看参数bindinput语法格式实现文本框与data之间的数据同步数据绑定基本原则在data中定义数据在WXML中使用数据在data中定义数据

在页面对应的.js 文件中,把数据定义到data对象中即可。

Mustache语法

把data中的数据绑定到页面中渲染,使用 Mustache语法(双大括号) 将变量包起来即可。

语法:<view>{{定义的数据名称}}</view>

Mustache语法的应用绑定内容

绑定内容即为文本的绑定,就如上述例子中将一个字符串绑定到view的文本节点中。

绑定属性

绑定属性即将一个数据绑定在一个标签的属性节点中。 如:在页面js文件的data中添加一个src数据。 在页面wxml文件中使用Mustache语法将其绑定在image标签的属性节点中。

运算(三元运算、算术运算等)

在小程序的编译中也可以进行运算操作。

三元运算

如: 在页面js文件中添加data数据。 在页面.wxml中绑定该数据,并进行判断.

算数运算

如: 在页面js文件中的data中添加数据。 在页面wxml中进行数据绑定,并进行计算。

事件绑定什么是事件?

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。与html类似,相当于用户与小程序的交互。

常用事件事件用法说明tapbindtap/bind:tap手指触摸后马上离开,相当于html中的click事件inputbindinput/bind:input文本框的输入事件changebindchange/bind:change状态改变时触发事件对象属性

当事件回调触发的时候,会收到一个事件对象event(与js中的事件对象类似),它的详细属性如下表所示:

属性类型说明typeString事件类型timeStampInteger页面打开到触发事件所经过的毫秒数targetobject触发事件的组件的一些属性值集合currentTargetobject当前组件的一些属性值集合detailobject额外的信息touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件,当前变化的触摸点信息的数组target与currentTarget的区别【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步(微信小程序怎么制作自己的小程序)

event.target返回的是触发该事件的源头组件,而currentTarget则返回的是当前事件所绑定的源头组件。 如: 给view绑定了单击事件,在该事件下有一个按钮组件,当我们单击按钮时,event.target返回的就是这个按钮组件。而event.currentTarget返回的就是view这个绑定事件的源头组件。因此,常用到的是target属性而非currentTarget属性。

bindtap语法格式

在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。

通过bindtap给组件绑定tap触摸事件。 如下图所示: 在页面wxml文件中绑定触摸事件

在页面js中定义相应的事件处理函数,事件属性通过传入一个形参来接收。通常为event。 当点击按钮时,控制台便会输出。

在事件处理函数中为data赋值

使用this.setData()方法可以修改data中的数据。

在data中定义数据。

为事件响应函数添加this.setData方法,并修改其数值。

在wxml文件中绑定数据

实现效果:

事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。如:

<button type="primary" bindtap="butnTap(3)">点击按钮+3</button>

这里并不能为butnTap事件函数传递参数,而是将butnTap(3)作为事件函数名。

为事件传递参数时,使用data-参数名="{{参数值}"}来传递参数。如:

<button type="primary" bindtap="butntTap" data-num="{{3}}">点击按钮+3</button>查看参数

通过event.target.dataset.参数名可查看我们设置的参数。

通过该参数也可修改data中的数值。 此时点击按钮就自增加3

bindinput语法格式通过bindinput,可以为文本框绑定输入事件 <input bindinput="inputBd" ></input>在页面js文件中定义事件处理函数。通过even.detail.value来获取文本框中的内容。实现文本框与data之间的数据同步

实现步骤:

定义数据 在页面js文件中定义文本数据

渲染结构 设置value默认值。

<input bindinput="inputBd" value="{{text}}"></input>美化样式 将文本框美化一下input{ border: 1px solid blue; border-radius: 5px;}绑定input 事件处理函数 inputBd(event){ // console.log(event.detail.value); this.setData({ text:event.detail.value }) }

输入文本,此时data中的text也随之改变。 到这里本节内容就结束啦,下期带大家了解微信小程序中的条件渲染和列表渲染。欢迎订阅本专栏,持续更新中…

本文链接地址:https://www.jiuchutong.com/zhishi/297820.html 转载请保留说明!

上一篇:最多显示2行文字,多余的省略显示。(最多显示2行文字怎么弄)

下一篇:React+Mobx|基本使用、模块化(react moment)

  • iqoo5g开关在哪里(iqoo手机5g开关在哪里)

    iqoo5g开关在哪里(iqoo手机5g开关在哪里)

  • qq音乐删除访问记录别人能看见吗(qq音乐删除访问有效吗)

    qq音乐删除访问记录别人能看见吗(qq音乐删除访问有效吗)

  • 苹果如何不删除app清理内存(苹果如何不删除app清理抖音内存)

    苹果如何不删除app清理内存(苹果如何不删除app清理抖音内存)

  • win7截图快捷键ctrl加什么(win7截图快捷键命令)

    win7截图快捷键ctrl加什么(win7截图快捷键命令)

  • 淘宝u先试用要还嘛(淘宝u先试用要还吗)

    淘宝u先试用要还嘛(淘宝u先试用要还吗)

  • 抖音极速版无法绑定(抖音极速版无法注销账号该怎么办)

    抖音极速版无法绑定(抖音极速版无法注销账号该怎么办)

  • 英特尔e5400哪年出的(英特尔e5400用什么主板)

    英特尔e5400哪年出的(英特尔e5400用什么主板)

  • 智慧团建认证不通过有什么影响(智慧团建认证不通过要怎么办)

    智慧团建认证不通过有什么影响(智慧团建认证不通过要怎么办)

  • 手机没连接耳机成耳机状态怎么办(手机没连接耳机成耳机状态怎么办苹果)

    手机没连接耳机成耳机状态怎么办(手机没连接耳机成耳机状态怎么办苹果)

  • 华为gps定位在哪儿设置(华为gps设置在手机什么位置)

    华为gps定位在哪儿设置(华为gps设置在手机什么位置)

  • 电源开关on和off哪个是开(电源开关off和on怎么读)

    电源开关on和off哪个是开(电源开关off和on怎么读)

  • 店铺基本设置的页面中的重点是店标和什么(店铺基本设置的页面中的重点是电表盒)

    店铺基本设置的页面中的重点是店标和什么(店铺基本设置的页面中的重点是电表盒)

  • 开发版稳定版哪个流畅(开发版比稳定版好在哪里)

    开发版稳定版哪个流畅(开发版比稳定版好在哪里)

  • 抖音评论成功但看不见(抖音评论成功却不显示,要点一下才会显示,怎么回事)

    抖音评论成功但看不见(抖音评论成功却不显示,要点一下才会显示,怎么回事)

  • 芒果tv能看央视直播吗

    芒果tv能看央视直播吗

  • 苹果se2是双卡双待吗(苹果se2双卡双待吗?)

    苹果se2是双卡双待吗(苹果se2双卡双待吗?)

  • 200kva变压器能带多少千瓦(200kva变压器能带240千瓦吗)

    200kva变压器能带多少千瓦(200kva变压器能带240千瓦吗)

  • 电脑怎么下载搜狗输入法(电脑怎么下载搜狗五笔)

    电脑怎么下载搜狗输入法(电脑怎么下载搜狗五笔)

  • 魅族16有几个扬声器(魅族16x是不是双扬声器)

    魅族16有几个扬声器(魅族16x是不是双扬声器)

  • xp任务栏变宽了怎么办

    xp任务栏变宽了怎么办

  • 手机怎样定位另一个手机(手机怎样定位另一个人手机位置)

    手机怎样定位另一个手机(手机怎样定位另一个人手机位置)

  • 如何拍出云流动的视频(相机怎么拍流动的云)

    如何拍出云流动的视频(相机怎么拍流动的云)

  • word小写变大写怎么弄(word小写变大写字母)

    word小写变大写怎么弄(word小写变大写字母)

  • 电商后台管理系统简介

    电商后台管理系统简介

  • 企业所得税年报申报时间
  • 购买土地税率是多少
  • 房产税的计税依据包含增值税吗
  • 年报零申报的103怎么填
  • 自然人个税申报错误怎么更改?
  • 专票3个点和6个点哪个多
  • 销货方违规作废增值税专用发票怎么处理
  • 未确认收入可以开发票吗
  • 制造费用可以抵进项税吗
  • 打官司失败了要赔偿原告诉讼费吗?
  • 关于销售返利的说法正确的有
  • 集团公司向子公司收取管理费的法律规定
  • 软件企业增值税退税的账务处理
  • 公司食堂买菜入什么科目
  • 税务稽查执法要以什么为依据,按照法定的职责
  • 差额发票开具的步骤
  • 总公司签合同发票可以给子公司吗
  • 经营用的固定资产
  • 我的初级备考经验--付出才有回报
  • 外籍人员工资个税
  • 库存商品无发票所得税怎么调增
  • 原始凭证日期大写要求
  • 用工会经费给员工发工资
  • 年终股东利润分配方案
  • 购买国外技术需要缴纳什么税
  • 电脑怎么一键返回到桌面
  • 收到对方给的发票怎么做账
  • 税前扣除税后扣除
  • 怎么通过mac地址访问设备
  • 隐藏资源管理器窗口
  • MAC OS X 10.12.5 beta 4怎么升级 OS X 10.12.5 beta 4升级图文教程
  • 进程中svchost
  • 电竞显示器怎么调整参数
  • 冷漠的渡鸦们,美国阿拉斯加州 (© Brian Browitt Photo/Adobe Stock)
  • 固定资产减值损失属于什么科目
  • php的fopen
  • 阿尔卑斯旱獭冬眠
  • php单例模式例子
  • 圣托里尼岛具体位置
  • 记账凭证错误用什么更正
  • 刷题有什么作用
  • 少收的应收款和应收账款
  • 商品流通企业商品验收入库流程
  • 已经认证了的专利怎么办
  • 长期无法收回的应收账款如何处理
  • 长期股权投资减值准备是什么科目
  • 老板出差司机住哪
  • 销售货物收到货款
  • 企业税务分为哪几类
  • 什么叫非限定性不定方程
  • 母公司兼并子公司怎么办
  • 购车贷款分期利率
  • 公司购买的家电怎么入账
  • 出口货物退货的原因
  • mysql数据库操作题
  • window下mysql忘记密码
  • windows7创建虚拟桌面
  • 清理macbook清除系统垃圾
  • 笔记本如何一键锁屏快捷键
  • win7系统打开软件慢的原因
  • windows7旗舰版怎么打字
  • 带上Windows 8去旅行 让你的旅途更轻松
  • linux计划任务每天执行一次
  • 好好了解 英文
  • 详解16型人格
  • jquery layer
  • nodejs操作mongodb
  • recyclebinh
  • python3 random模块
  • 原生js实现ajax步骤
  • python3.9爬取网页教程
  • android documents
  • 陕西税务管网
  • 企业房产税计算器
  • 进出口贸易产品种类
  • 福建省农业厅副厅长梁
  • 珠海南湾国际属于香洲哪个街道
  • 预测收入遵循什么方法
  • 独立的法人企业
  • 无偿赠送怎么做账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设