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

  • 小米音箱连不上wifi怎么办(小米音箱连不上手机蓝牙)

    小米音箱连不上wifi怎么办(小米音箱连不上手机蓝牙)

  • 华为nova7se怎么设置应用锁(华为nova7se怎么添加门禁卡)

    华为nova7se怎么设置应用锁(华为nova7se怎么添加门禁卡)

  • 512g实际容量是多少(512gb实际容量)

    512g实际容量是多少(512gb实际容量)

  • 荣耀30是双卡双待吗(荣耀30是双卡双待5G吗?)

    荣耀30是双卡双待吗(荣耀30是双卡双待5G吗?)

  • 华为matepadpro可以打电话吗(华为matepadpro可以插内存卡吗)

    华为matepadpro可以打电话吗(华为matepadpro可以插内存卡吗)

  • qq远程办公什么意思(qq可以远程办公吗)

    qq远程办公什么意思(qq可以远程办公吗)

  • 华为mate30收不到短信验证码(华为mate30收不到验证码)

    华为mate30收不到短信验证码(华为mate30收不到验证码)

  • 微信图片保存到电脑上打不开(微信图片保存到系统相册在哪里)

    微信图片保存到电脑上打不开(微信图片保存到系统相册在哪里)

  • 快手没有钱包什么原因(快手没有钱包功能)

    快手没有钱包什么原因(快手没有钱包功能)

  • 网络协议的组成因素(网络协议的组成要素是什么,举例说明协议及对应的要素)

    网络协议的组成因素(网络协议的组成要素是什么,举例说明协议及对应的要素)

  • ios12怎么屏蔽垃圾短信(iphone12如何屏蔽垃圾电话和信息)

    ios12怎么屏蔽垃圾短信(iphone12如何屏蔽垃圾电话和信息)

  • 华为mate20是屏幕指纹解锁吗(华为mate20屏幕怎么样?)

    华为mate20是屏幕指纹解锁吗(华为mate20屏幕怎么样?)

  • ipad2018支持蓝牙鼠标吗(ipad2018支持蓝牙5.2吗)

    ipad2018支持蓝牙鼠标吗(ipad2018支持蓝牙5.2吗)

  • ipad一直显示需要几分钟激活(ipad一直显示需要登录)

    ipad一直显示需要几分钟激活(ipad一直显示需要登录)

  • word中画线的笔在哪里(word2007画线的笔)

    word中画线的笔在哪里(word2007画线的笔)

  • 小米8陀螺仪在设置哪里(小米陀螺仪在哪里设置)

    小米8陀螺仪在设置哪里(小米陀螺仪在哪里设置)

  • 模式识别受体的概念(模式识别受体的总称)

    模式识别受体的概念(模式识别受体的总称)

  • ftp打开始终是网页形式(ftp打开文件弹出网页)

    ftp打开始终是网页形式(ftp打开文件弹出网页)

  • 快手热门被屏蔽怎么查(快手号被屏蔽过了是不是就不能上热门)

    快手热门被屏蔽怎么查(快手号被屏蔽过了是不是就不能上热门)

  • 微信投票异常多久解除(微信投票异常会恢复吗)

    微信投票异常多久解除(微信投票异常会恢复吗)

  • 华为p30 pro和苹果xsmax有什么不同(华为p30pro和苹果14pro对比)

    华为p30 pro和苹果xsmax有什么不同(华为p30pro和苹果14pro对比)

  • 苹果更新要多久(苹果更新要多久ios16)

    苹果更新要多久(苹果更新要多久ios16)

  • 小米手环1怎么开机(小米手环1怎么连接手机app)

    小米手环1怎么开机(小米手环1怎么连接手机app)

  • Windows11怎么查看IP地址?win11查看电脑IP地址方法(windows11怎么查看显卡)

    Windows11怎么查看IP地址?win11查看电脑IP地址方法(windows11怎么查看显卡)

  • 制作flash动画教程(制作flash动画步骤)

    制作flash动画教程(制作flash动画步骤)

  • fpxpress.exe是什么进程 有什么作用 fpxpress进程查询(fpx是什么文件)

    fpxpress.exe是什么进程 有什么作用 fpxpress进程查询(fpx是什么文件)

  • 上海浦东森林心形洞穴鸟瞰图,中国 (© Yaorusheng/Getty Images)(浦东森林村)

    上海浦东森林心形洞穴鸟瞰图,中国 (© Yaorusheng/Getty Images)(浦东森林村)

  • 财务报表中的应交税费包括什么
  • 进项税额转出的例题
  • 印花税申报缴纳错误,怎么办
  • 农产进项税是多少税率
  • 对方开给我的专票遗失了,让我上传发票
  • 事业单位财政拨款取得方式
  • 一般纳税人增值税申报操作流程
  • 工商企业年金查询个人账户查询
  • 已经报销的发票还会查吗
  • 跨月的普通发票怎么开
  • 这个月只有进项没有销项
  • 企业开办费的会计和税务处理
  • 企业只有收入没有支出是否违规
  • 没有按时缴纳税属于什么
  • 增值税电子发票有限额吗
  • 什么是季初值和季末值
  • 服装外贸进出口
  • 无偿接收股权
  • 二手房产增值税率
  • 上个月开的发票退回怎么处理?
  • 发票代码会有一样的吗
  • 如何代开外籍人员个人所得税完税凭证?
  • 企业年会的费用会计分录
  • 工资中的话费补助是什么
  • 如何解决win7系统搜不到蓝牙耳机
  • OS X Yosemite系统下载失败怎么办?OS X 10.10下载错误解决方法
  • 跨年的费用可以直接入账吗
  • 美团佣金收费标准结构图
  • 苹果macOS 13.3 RC 发河北承德市承德县华夏电器
  • php中使用js
  • 公司基本户可以收款吗
  • 聊聊vue3的defineProps、defineEmits、defineExpose
  • 倾向得分匹配后怎么进行回归
  • 预缴纳税申报怎么不能保存
  • 销售费用工资明细科目
  • for循环语法结构是什么
  • mongo聚合查询效率问题
  • c语言缺省值
  • 转出未交增值税最终怎么转平
  • 往来款项的含义
  • mysql sql性能调优的方法
  • 医院执行政府会计制度操作指南 .pdf
  • 公司注册登记需要多少钱
  • 完税凭证抵扣进项税额分录
  • 房屋出租简易计税进项税额需要转出么
  • 提取法定盈余公积会计分录
  • 商贸公司批发零食怎么样
  • 建设期贷款利息定义是什么
  • 固定资产正常报废与非正常报废的会计处理基本相同
  • 收到供应商的赔偿款要开票吗
  • 财务报表现金流量表怎么填
  • 跨月发票红冲还要交税吗
  • 专项应付款在借方
  • 资金紧张怎么说
  • 公司向个人借款分录
  • 制造费用最终去哪里了啊
  • 买车给了上牌费去车管所还用给钱吗
  • 填写增值税纳税申报怎么填写?
  • MySQL slave_net_timeout参数解决的一个集群问题案例
  • solaris root密码过期
  • centos virsh
  • wincomm.exe - wincomm是什么进程
  • wincomp.exe - wincomp进程是什么意思
  • win10系统锁屏后不弹出解锁界面
  • linux怎么下载安装腾讯Tim?
  • Win7开机就蓝屏
  • ie11打不开闪退解决办法win 7
  • win8软件安装
  • win7系统咋样
  • opengl读取obj文件
  • opengl oes纹理
  • 批量压缩命令
  • jquery.css
  • linux文件处理三剑客
  • jsoni
  • python查找字符串中指定字符的个数
  • js检测类型的方法
  • 深圳大学各专业组代码
  • 税务局开蔬菜普票需要几个点
  • 油品贸易公司资质
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设