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

  • 东东农场怎么看兑换记录(东东农场怎么打开)

    东东农场怎么看兑换记录(东东农场怎么打开)

  • 华为mate40屏幕有多大(华为mate40屏幕有阴影)

    华为mate40屏幕有多大(华为mate40屏幕有阴影)

  • 微信发说说文字怎么才能显示全(微信说说怎么发文字显示全部出来)

    微信发说说文字怎么才能显示全(微信说说怎么发文字显示全部出来)

  • 三星手机充电慢的原因(三星手机充电慢怎么解决)

    三星手机充电慢的原因(三星手机充电慢怎么解决)

  • 电脑开机后卡死在桌面(电脑开机后卡死不动 鼠标能动)

    电脑开机后卡死在桌面(电脑开机后卡死不动 鼠标能动)

  • 手机导数据是什么意思(手机导数据什么软件最方便)

    手机导数据是什么意思(手机导数据什么软件最方便)

  • lexmark x422是什么(lexmark x422是什么意思)

    lexmark x422是什么(lexmark x422是什么意思)

  • 三星s8充电功率(三星s8充电功率多少)

    三星s8充电功率(三星s8充电功率多少)

  • 微信语音通话没有声音(微信语音通话没有来电提醒)

    微信语音通话没有声音(微信语音通话没有来电提醒)

  • 手机壳影响无线充电(手机壳影响无线网信号)

    手机壳影响无线充电(手机壳影响无线网信号)

  • 华为电话如何通话录音(华为怎么通话)

    华为电话如何通话录音(华为怎么通话)

  • 华为nova6 4G和5G的区别(华为nova6 4G和5G外观有什么区别)

    华为nova6 4G和5G的区别(华为nova6 4G和5G外观有什么区别)

  • 耳机能听见声音不能说话怎么回事(耳机能听见声音,但自己的声音传不出去)

    耳机能听见声音不能说话怎么回事(耳机能听见声音,但自己的声音传不出去)

  • ipad激活从icloud恢复要多久(ipad激活从icloud恢复很慢)

    ipad激活从icloud恢复要多久(ipad激活从icloud恢复很慢)

  • 文本属于感觉媒体吗(文本是媒体元素吗)

    文本属于感觉媒体吗(文本是媒体元素吗)

  • 手机imei是什么意思啊(苹果手机imei查询)

    手机imei是什么意思啊(苹果手机imei查询)

  • iphonex双卡双待吗(iphonex系列双卡)

    iphonex双卡双待吗(iphonex系列双卡)

  • 华为手机怎么弄彩虹电量(华为手机怎么弄出来下边的三个键)

    华为手机怎么弄彩虹电量(华为手机怎么弄出来下边的三个键)

  • 手机为什么下不了东西(手机为什么下不了软件)

    手机为什么下不了东西(手机为什么下不了软件)

  • 荣耀Magic Watch 2有没有扬声器(荣耀magicwatch2能下载软件吗)

    荣耀Magic Watch 2有没有扬声器(荣耀magicwatch2能下载软件吗)

  • 华为云服务在哪里找(华为云服务在哪里打开)

    华为云服务在哪里找(华为云服务在哪里打开)

  • 快手多少人举报能封号(快手多少人举报会封直播)

    快手多少人举报能封号(快手多少人举报会封直播)

  • win10怎么分盘(win10怎么分盘分配空间)

    win10怎么分盘(win10怎么分盘分配空间)

  • 携程火车票优享预订怎么取消(携程优享费什么意思)

    携程火车票优享预订怎么取消(携程优享费什么意思)

  • 手机限流了怎么办(手机限流了怎么弄)

    手机限流了怎么办(手机限流了怎么弄)

  • 微信被冻结了,手机号换了能解冻吗(微信被冻结了零钱通还能用吗)

    微信被冻结了,手机号换了能解冻吗(微信被冻结了零钱通还能用吗)

  • iphone x快充支持多少w(苹果x支持快充协议)

    iphone x快充支持多少w(苹果x支持快充协议)

  • centos7安装clickhouse并设置用户名密码案例详解(CENTOS7安装报错)

    centos7安装clickhouse并设置用户名密码案例详解(CENTOS7安装报错)

  • 前端技术:解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund(前端解决方案)

    前端技术:解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund(前端解决方案)

  • 预缴增值税是否要预缴企业所得税
  • 非关联企业借款利息扣除
  • 什么是价外税价外税有哪些
  • 个体户需要做利润分析吗
  • 行政单位利息收入可以扣除手续费
  • 期初是什么
  • 会计做账写错了怎么办
  • 增值税发票注明金额是含税还是不含税
  • 墨盒应该怎么买
  • 所得税汇算清缴捐赠支出扣除标准
  • 营改增前未完工的老项目可以开专票吗
  • 职工在异地住院怎么报销
  • 物料损耗会计分录
  • 外经证预交增值税和专管员
  • 合作社能否开具专用发票
  • 简易计税的收入怎么做账
  • 银行和保险公司归哪个部门管
  • 个人转账至公司要交税吗
  • 海关年检需要什么资料
  • 申请办理银行承兑流程
  • 利润表季度报表
  • 事业单位福利费计提标准
  • 劳务公司费用成本怎么算
  • 进项税额转出会计处理
  • macbookpro finder
  • 测测网络
  • 支付设备维修费用计入什么科目
  • bios中怎么设置显卡
  • win7为什么没有本地连接
  • 母公司向子公司发行面值100万元、期限为三年
  • 收到发票后补付什么意思
  • 新买的笔记本电脑需要装系统吗
  • 二次规划是什么意思
  • 办置业公司需要哪些材料
  • 矿业财务好做吗
  • php编程获取音频信息
  • 微信小程序反编译2023
  • 马萨诸塞 下架
  • 跨区域预缴增值税是当月还是次月
  • 税控盘用来干嘛的
  • 30岁之后去面试
  • php单例模式
  • 消耗性生物资产的账务处理
  • 其他应收款资产类
  • 低值易耗品如何界定
  • 退还押金的会计分录怎么写
  • sql2008附加数据库
  • sql server标识符
  • 差额发票如何做账
  • 非税收入一般缴款书是什么意思
  • 加息法实际利率计算公式
  • 建筑工程劳务分包合同范本2019
  • 库存股的处理方式
  • 价外费用如何计税
  • 其他业务收入与其他业务成本的关系
  • linux重置开机密码
  • 如何编译安装
  • 修改注册表显示隐藏文件
  • linux和windows交互
  • linux rpm包安装
  • win7系统玩暗黑2怎样全屏
  • windows10如何多选文件
  • win7系统局域网无法看到其他电脑
  • 怎么放大linux字体
  • git 常用指令
  • 用css制作网页的步骤
  • python djang
  • 代码sd是什么意思
  • unity 3d代码
  • jquery中绑定事件
  • linux shell获取ip地址
  • javascript基础笔记
  • android:imeOptions属性
  • 党日活动与专业建设结合
  • 威科先行法律信息库价格
  • 残疾人拿药能报销吗?
  • 泉州企业医保哪里缴费
  • 税控盘过了时间没清卡要罚多少钱
  • 税务怎么报停
  • 深圳国税咨询电话是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设