位置: 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)

  • 借款合同印花税最新政策2023年
  • 集团内部资产调拨
  • 应收利息的概念是什么
  • 小规模纳税人销售农产品税率是多少
  • 农产品普通发票抵扣政策
  • 投资收益做什么
  • 企业经营活动所需的资金的来源渠道有
  • 公务员工资待遇标准表
  • 转让土地使用权会计分录怎么做
  • 向一般纳税人销售劳保专用物品
  • 企业支付的产品广告费应计入什么账户借方
  • 关于工商年检社保的通知
  • 工商年报员工人数怎么算
  • 股权购买会计分录
  • 建筑企业预收的工程款会计分录
  • 增值税发票和收据的区别
  • 开具发票的收入如何做账务处理?
  • 新版edge浏览器极速模式
  • 应收账款零头会计处理
  • PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
  • 事业单位收到拨入的工资怎么做账
  • 苹果推送ios15
  • 员工聚餐费用计入
  • shstart.exe - shstart是什么进程 有什么用
  • 交接目录excel
  • php 首字母大写
  • 公司员工意外险,死亡能赔多少钱
  • 如何利用路由器登陆花生壳
  • Honeybee flying over crocuses in the Tatra Mountains, Poland (© Mirek Kijewski/Getty Images)
  • 烟花绽放的除夕夜题目
  • php自定义字段
  • vue3项目搭建
  • php100 jquery教程
  • 社会团体账务处理流程举例
  • python怎么将整数转化为字符串
  • 报名附件怎么上传
  • 帝国cms真的很好用
  • 不是企业职工能否挂靠企业交社保
  • python怎么创建
  • Postgresql ALTER语句常用操作小结
  • 向境外支付赔偿款是否需要税务备案
  • 技术安装工人包食宿
  • mysql innodb锁
  • 财务费用账户属于什么账户
  • 公司为职工提供免费午餐需要交纳个人所得税吗?
  • 销售明细账本怎么填写
  • 债务抵销的条件
  • 失控发票要转出成本吗
  • 工作失误扣工资的规定是什么
  • 固定资产进项税率
  • 当天开具的发票当天不能勾选认证吗?
  • 固定资产出售增值税减按2%征收,附表一,填写
  • 购买银行理财产品的几个必须知道
  • 地方教育费附加从哪年开始征收的
  • 资产减值损失包含
  • 该卡已在其他账户中存在什么意思
  • ipv6文件
  • vs2008如何使用
  • window10收藏夹怎么导出
  • win10开机内存就占了70 解决方法
  • windows越狱软件
  • windows8使用教程
  • mac文件怎么用
  • win10升级 其他用户
  • jasonToObject
  • nodejs示例
  • shell脚本实现自动化巡检报警发送邮箱
  • unity3ds
  • shell的case语法
  • 删除批处理命令
  • 运算符优先级由高到低的顺序
  • javascript中cookie
  • javascript教程
  • js function的this指向
  • django框架详解
  • 税务局收垃圾处置费
  • 外经证注销网上操作
  • 拟录用和录用的区别在哪
  • 西安税务局服务电话
  • 甘肃税务政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设