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

  • 浅谈企业站站内博客优化细节(浅谈企业站站内营销策略)

    浅谈企业站站内博客优化细节(浅谈企业站站内营销策略)

  • shellexecutehooks如何创建正确的(shellexecutehooks)

    shellexecutehooks如何创建正确的(shellexecutehooks)

  • 魅族18s有耳机孔吗(魅族18耳机接口)

    魅族18s有耳机孔吗(魅族18耳机接口)

  • word给文字添加双实线(word给文字添加双实线边框)

    word给文字添加双实线(word给文字添加双实线边框)

  • 小米智能充电保护在哪(小米智能充电保护有必要打开吗)

    小米智能充电保护在哪(小米智能充电保护有必要打开吗)

  • 抖音里歌词怎么滚动在屏幕上(抖音里歌词怎么横排多行)

    抖音里歌词怎么滚动在屏幕上(抖音里歌词怎么横排多行)

  • 看网易云听歌次数在哪(看网易云听歌次数的软件)

    看网易云听歌次数在哪(看网易云听歌次数的软件)

  • 微信运动半夜自动增加(微信运动半夜自动更新)

    微信运动半夜自动增加(微信运动半夜自动更新)

  • 什么是hifi音质(什么叫hifi音质)

    什么是hifi音质(什么叫hifi音质)

  • 华为售后换屏幕跟原来一样吗(华为售后换屏幕需要人工费吗)

    华为售后换屏幕跟原来一样吗(华为售后换屏幕需要人工费吗)

  • ipadmini2版本低不能用微信(ipad mini2ios版本)

    ipadmini2版本低不能用微信(ipad mini2ios版本)

  • 华为p30欧版和国行的区别(p30欧版和国行一样吗)

    华为p30欧版和国行的区别(p30欧版和国行一样吗)

  • 电脑没有dp接口怎么办(电脑没有dp接口华为vr)

    电脑没有dp接口怎么办(电脑没有dp接口华为vr)

  • 免打扰模式微信语音通话能收到吗(免打扰模式微信怎么设置)

    免打扰模式微信语音通话能收到吗(免打扰模式微信怎么设置)

  • 苹果11手机显示电量百分比的在哪里设置(苹果11手机显示屏未知部件)

    苹果11手机显示电量百分比的在哪里设置(苹果11手机显示屏未知部件)

  • iphonexr怎么下载不了软件

    iphonexr怎么下载不了软件

  • mate 20出现hd是什么(mate20 hd标志)

    mate 20出现hd是什么(mate20 hd标志)

  • 苹果x怎么清理垃圾清理(苹果x怎么清理系统数据)

    苹果x怎么清理垃圾清理(苹果x怎么清理系统数据)

  • 淘宝人生装扮怎么取消(淘宝人生装扮怎样去掉帽子)

    淘宝人生装扮怎么取消(淘宝人生装扮怎样去掉帽子)

  • 老人手机sos怎么取消(老人手机sos是什么意思)

    老人手机sos怎么取消(老人手机sos是什么意思)

  • 苹果无线耳机怎么用(苹果无线耳机怎么充电)

    苹果无线耳机怎么用(苹果无线耳机怎么充电)

  • 为什么手机内存突然变小(为什么手机内存越来越少,删了软件也不行)

    为什么手机内存突然变小(为什么手机内存越来越少,删了软件也不行)

  • 微信收款积分在哪里兑换(微信分付怎么分期)

    微信收款积分在哪里兑换(微信分付怎么分期)

  • 头条会员怎么关闭续费(怎样关头条)

    头条会员怎么关闭续费(怎样关头条)

  • 电脑文件夹发送到手机上(电脑文件夹发送到微信)

    电脑文件夹发送到手机上(电脑文件夹发送到微信)

  • 小红书如何看完整图片(小红书如何看完整的笔记)

    小红书如何看完整图片(小红书如何看完整的笔记)

  • excel如何批量计算(Excel如何批量计算平均值)

    excel如何批量计算(Excel如何批量计算平均值)

  • Linux不能上网ping:unknown host出错该怎么办?(linux不能联网怎么解决)

    Linux不能上网ping:unknown host出错该怎么办?(linux不能联网怎么解决)

  • ubuntu下载的的VScode不能输入中文解决(ubuntu 安装vs code)

    ubuntu下载的的VScode不能输入中文解决(ubuntu 安装vs code)

  • Mac 更换.gradle文件目录(修改gradle版本)

    Mac 更换.gradle文件目录(修改gradle版本)

  • 基于 Spring MVC + MyBits + Maven(基于springboot的毕设)

    基于 Spring MVC + MyBits + Maven(基于springboot的毕设)

  • 爆改YOLOV7的detect.py制作成API接口供其他python程序调用(超低延时)(yolov5怎么改进)

    爆改YOLOV7的detect.py制作成API接口供其他python程序调用(超低延时)(yolov5怎么改进)

  • dedecms提示用户名不存在是什么原因造成的(dedecms使用教程)

    dedecms提示用户名不存在是什么原因造成的(dedecms使用教程)

  • 出口退税便捷退税操作流程
  • 增值税怎么记
  • 保险公司代收车船税会计分录
  • 支付短期借款利息的会计科目
  • 冲红的发票要拿回来吗
  • 收回已冲销的坏账分录
  • 资产损失税前扣除管理办法
  • 购买的旧机械设备怎么办
  • 餐饮刷卡机手续费多少
  • 企业员工奖励款怎么做账
  • 营业执照印花税减免政策
  • 个人出租仓库需交税吗
  • 兼营免税减税项目
  • 应交税费明细科目有简易计税吗
  • 普票冲红可以部分冲红吗
  • 印制宣传册
  • 邮政通信业
  • 企业的公益性捐赠支出
  • 劳务人员奖金如何纳税
  • mac双系统删除window后怎么重新恢复
  • WIN7系统的镜像文件在哪里
  • 个体户流水太大工商局会查吗
  • 进货折扣是怎么计算
  • dgservice.exe是什么
  • php sybase_fetch_array使用方法
  • 中秋福利发放现金怎么做表
  • 政府财政会计核算基础是什么
  • 礼的部首是什么部
  • 社保包括哪些保险及比例
  • 以不动产作价出资入股
  • 印克斯湖国家公园中的德克萨斯矢车菊,德克萨斯州 (© Inge Johnsson/Alamy)
  • 豁免债权如何做账
  • 如何汇算清缴,会计新手求指教
  • php 字符串处理函数
  • 详解16型人格
  • 修改命令的快捷键
  • thinkphp6验证
  • 旅行社专票开票内容的规定
  • 银行账号未备案怎么解决
  • 简易计税项目可抵扣吗
  • 织梦添加文章如何修改高级参数
  • vue多平台
  • 捐赠做公益
  • 经营性罚款在会计中怎么处理
  • 发票上的货物要怎么填?
  • 交易性金融资产属于流动资产
  • 社会团体会员费怎么入账
  • 收到货款未开发票是否违法
  • 财务会计应收票据
  • 国有资产无偿划转协议
  • 明细账分类账登记
  • 年末进项大于销项怎么结转
  • 记账凭证原始凭证回单的粘贴顺序
  • 五险一金怎么用呢
  • SQL Server Alwayson添加监听器失败的解决方法
  • sqlserver 储存过程
  • sql1068错误
  • WIN10开始菜单点击鼠标右键没反应的处理方法
  • 卡巴斯基2019
  • u深度u盘启动盘制作工具无法进入电脑
  • linux中more命令详解
  • linux oracle 12505
  • xp系统快捷启动按哪个
  • 如何教新手
  • 修改linux系统用户密码
  • 无法启动.dll
  • opengl教程48讲
  • 安卓游戏报告
  • perl获取文件名
  • Scrapy框架可以用于数据挖掘、监测和自动化测试
  • unity3d怎么改变物体大小
  • 魔兽世界全部开发成本
  • jquery .html的用法
  • 安卓判断横竖屏
  • android adt
  • javascript面向对象 第三方类库
  • 进口汽车增值税怎么算
  • 机票电子发票怎么作废
  • 一次性收入多少要交个人所得税
  • 江苏省国地税合并
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设