小程序的数据绑定和事件绑定

小程序的数据绑定

        1.需要渲染的数据放在index.js中的data里

Page({data: {info:'HELLO WORLD',imgSrc:'/images/1.jpg',randomNum:Math.random()*10,randomNum1:Math.random().toFixed(2)},
})

        2.在WXML中通过{{}}获取数据

 <view>{{info}}</view><image src="{{imgSrc}}" mode="widthFix"></image><view>{{randomNum >= 5 ? '大于等于5' : '小于5'}}</view><view>{{randomNum1 * 100}}</view>

 

小程序的事件绑定

        什么是事件:渲染层到逻辑层的通讯方式,将用户在渲染层的行为传递到逻辑层

       常见的事件     

  • tap(触摸后离开)
  • input(文本框输入) 
  • change(状态改变)

        通过bind来绑定事件

bindtap/bind:tap

     事件对象的属性列表

        事件回调触发时,会收到一个事件对象event,它的属性如下所示

type事件类型
timeStamp页面打开到触发事件所用的毫秒数
target触发事件的组件的一些属性值集合(触发事件的源头组件)
currentTarget当前组件的一些属性值集合(正在触发事件的组件)
detail额外的信息
touches触摸事件,当前停留在屏幕上触摸点信息的数组
changedTouches触摸事件,当前变化的触摸点信息的数组

        1.给组件绑定事件

<button type="primary" bindtap="btnHandler">按钮</button>

        2.点击组件触发的事件

Page({ btnHandler(e){console.log(e)}
})

        3.查看绑定的效果

 

 将事件绑定的数据进行渲染并且同步(vue的v-model事件)

        1.创建一个共享的数据

Page({ data:{ msg:"你好"}, }) 

        2.将input组件绑定一个事件  syn并渲染数据

         {{}}  获取数据

<input value="{{msg}}" bindinput="syn"/>

        3.在js中编写syn的事件,将数据进行同步 

         this.setData     给数据重新进行赋值

Page({ data:{ msg:"你好"}, syn(e){this.setData({msg: e.detail.value})}
})

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ std::thread

若要使用线程类std::thread&#xff0c;则需包含<thread>头文件。 创建线程 std::thread表示一个线程。线程对象是不可复制或赋值的&#xff0c;但可以移动(move)&#xff0c;如移动构造或移动赋值。 当构造std::thread对象时&#xff0c;需给构造函数输入一个参数&am…

RocketMQ 5.0 架构解析:如何基于云原生架构支撑多元化场景

作者&#xff1a;隆基 本文将从技术角度了解 RocketMQ 的云原生架构&#xff0c;了解 RocketMQ 如何基于一套统一的架构支撑多元化的场景。 文章主要包含三部分内容。首先介绍 RocketMQ 5.0 的核心概念和架构概览&#xff1b;然后从集群角度出发&#xff0c;从宏观视角学习 R…

swift 项目集成友盟推送

1, 需要用桥接文件 , 不然引用不到依赖库 2, 可以用测试模式测试, 可以debug 3, 测试模式获取deviceToken, 添加测试设备 deviceToken获取方法 func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { le…

spark使用心得

spark入门 启停spark sbin/start-all.shsbin/stop-all.shspark-shell 进入spark/bin目录&#xff0c;执行&#xff1a; ./spark-shell 输出中有这么一行&#xff1a; Spark context Web UI available at http://xx.xx.xx.188:4040意味着我们可以从web页面查看spark的运行情…

优测云服务平台|【压力测试功能升级】轻松完成压测任务

一、本次升级主要功能如下&#xff1a; 1.多份报告对比查看测试结果 2.报告新增多种下载格式 Word格式Excel格式 3.新增多种编排复杂场景的控制器 漏斗控制器并行控制器事务控制器仅一次控制器分组控制器集合点 4.新增概览页面&#xff0c;包含多种统计维度 二、报告对比…

开源语音聊天软件Mumble

网友 大气 告诉我&#xff0c;Openblocks在国内还有个版本叫 码匠&#xff0c;更贴合国内软件开发的需求&#xff0c;如接入了国内常用的身份认证&#xff0c;接入了国内的数据库和云服务&#xff0c;也对小程序、企微 sdk 等场景做了适配。 在 https://majiang.co/docs/docke…

类与对象(上)

类与对象&#xff08;上&#xff09; 一、面向过程和面向对象的区别二、类1、类的引入2、类的定义&#xff08;1&#xff09;类的基本定义&#xff08;2&#xff09;类的成员函数的定义方法 3、类的访问限定符4、封装5、驼峰法命名规则6、类的作用域7、类的实例化&#xff08;1…

金蝶软件实现导入Excel数据分录行信息到单据体分录行中

>>>适合KIS云专业版V16.0|KIS云旗舰版V7.0|K/3 WISE 14.0等版本<<< 金蝶软件中实现[导入Excel数据业务分录行]信息到[金蝶单据体分录]中,在采购订单|采购入库单|销售订单|销售出库单等类型单据中,以少量的必要字段在excel表格中按模板填列好,很方便快捷地从…

IntelliJ IDEA(简称Idea) 基本常用设置及Maven部署---详细介绍

一&#xff0c;Idea是什么&#xff1f; 前言&#xff1a; 众所周知&#xff0c;现在有许多编译工具&#xff0c;如eclipse&#xff0c;pathon, 今天所要学的Idea编译工具 Idea是JetBrains公司开发的一款强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java…

Rancher管理K8S

1 介绍 Rancher是一个开源的企业级多集群Kubernetes管理平台&#xff0c;实现了Kubernetes集群在混合云本地数据中心的集中部署与管理&#xff0c;以确保集群的安全性&#xff0c;加速企业数字化转型。Rancher 1.0版本在2016年就已发布&#xff0c;时至今日&#xff0c;Ranche…

2023牛客第七场补题报告C F L M

2023牛客第七场补题报告C F L M C-Beautiful Sequence_2023牛客暑期多校训练营7 (nowcoder.com) 思路 观察到数组一定是递增的&#xff0c;所以从最高位往下考虑每位的1最多只有一个&#xff0c;然后按位枚举贪心即可。 代码 #include <bits/stdc.h> using namespac…

CS:GO升级 Linux不再是“法外之地”

在前天的VAC大规模封禁中&#xff0c;有不少Linux平台的作弊玩家也迎来了“迟到”的VAC封禁。   一直以来&#xff0c;Linux就是VAC封禁的法外之地。虽然大部分玩家都使用Windows平台进行游戏。但实际上&#xff0c;使用Linux畅玩CS:GO的玩家也不在少数。 以前V社主要打击W…

Linux上安装和使用git到gitoschina和github上_亲测

Linux上安装和使用git到gitoschina和github上_亲测 git介绍与在linux上安装创建SSHkey在git-oschina使用maven-oschina使用在github使用maven-github使用组织与仓库 【git介绍与在linux上安装】 Git是一款免费、开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何…

uniapp隐藏底部导航栏(非自定义底部导航栏)

uniapp隐藏底部导航栏 看什么看&#xff0c;要多看uni官方文档&#xff0c;里面啥都有 看什么看&#xff0c;要多看uni官方文档&#xff0c;里面啥都有 uniapp官方网址&#xff1a;uni设置TabBar // 展示 uni.showTabBar({animation:true,success() {console.debug(隐藏成功)…

【LVS】1、LVS负载均衡群集

1.群集的含义&#xff1a; Cluster、群集、集群 由多台主机构成并作为一个整体&#xff0c;只提供一个访问入口&#xff08;域名与IP地址&#xff09;&#xff1b;可伸缩 2.集群使用的场景&#xff1a; 高并发 3.企业群集的分类&#xff1a; 根据群集所针对的目标差异&a…

06-微信小程序-注册程序-场景值

06-微信小程序-注册程序 文章目录 注册小程序参数 Object object案例代码 场景值场景值作用场景值列表案例代码 注册小程序 每个小程序都需要在 app.js 中调用 App 方法注册小程序实例&#xff0c;绑定生命周期回调函数、错误监听和页面不存在监听函数等。 详细的参数含义和使…

【LeetCode】543.二叉树的直径

题目 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,4,5]…

每日一学——网络安全

网络安全设计、原则、审计等知识点的精讲如下&#xff1a; 网络安全设计与原则&#xff1a; 网络安全设计是指在系统或网络的设计过程中考虑到安全性&#xff0c;并采取相应的安全措施来保护系统或网络不受威胁。安全设计原则包括最小权限原则&#xff08;Least Privilege Prin…

高并发内存池(centralcache)[2]

Central cache threadcache是每个线程独享&#xff0c;而centralcache是多线程共享&#xff0c;需要加锁&#xff08;桶锁&#xff09;一个桶一个锁 解决外碎片问题&#xff1a;内碎片&#xff1a;申请大小超过实际大小&#xff1b;外碎片&#xff1a;空间碎片不连续&#x…

跨境电商ERP源码大揭秘,让你少走弯路

本文将深入介绍跨境电商ERP源码的重要性以及如何选择和应用它们&#xff0c;让你的电商业务更高效、顺畅。 跨境电商ERP源码的重要性 提升管理效率 跨境电商运营面临着众多挑战&#xff0c;如订单管理、库存追踪和财务报告等。跨境电商ERP源码能够集成这些功能&#xff0c;帮…