当前位置: 首页 > news >正文

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

小程序的数据绑定

        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})}
})

 

 

相关文章:

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

小程序的数据绑定 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"{{…...

第四章MyBatis核心配置文件

environments与environment标签 environments主要用来配置环境&#xff0c;属性default表示默认环境&#xff0c;值为environment的idenvironment为具体环境&#xff0c;属性id表示环境唯一标识environments可以有多个environment 加载默认环境 sqlSessionFactory sqlSessi…...

⛳ Docker - Centos 安装配置

目录 ⛳ Docker - Centos 安装配置&#x1f3ed; Docker 安装&#xff1a;&#x1f4e2; 一、安装依赖包&#x1f4ac; 二、添加 Docker 下载源地址&#x1f43e; 三、更新yum缓存&#x1f463; 四、安装Docker&#x1f4bb; 五、启动Docker&#x1f381; 六、查看Docker状态和…...

Python web实战之Django 的跨站点请求伪造(CSRF)保护详解

关键词&#xff1a;Python、Web、Django、跨站请求伪造、CSRF 大家好&#xff0c;今天我将分享web关于安全的话题&#xff1a;Django 的跨站点请求伪造&#xff08;CSRF&#xff09;保护&#xff0c;介绍 CSRF 的概念、原理和保护方法. 1. CSRF 是什么&#xff1f; CSRF&#…...

ARM(汇编指令)

.global _start _start:/*mov r0,#0x5mov r1,#0x6 bl LoopLoop:cmp r0,r1beq stopsubhi r0,r0,r1subcc r1,r1,r0mov pc,lr*/ mov r0,#0x1mov r1,#0x0mov r2,#0x64bl Loop Loop:cmp r0,r2bhi stopadd r1,r1,r0add r0,r0,#0x01mov pc,lr stop:B stop.end...

神经网络基础-神经网络补充概念-01-二分分类

概念 二分分类是一种常见的机器学习任务&#xff0c;其目标是将一组数据点分成两个不同的类别。在二分分类中&#xff0c;每个数据点都有一个与之关联的标签&#xff0c;通常是“正类”或“负类”。算法的任务是根据数据点的特征来学习一个模型&#xff0c;以便能够准确地将新…...

Linux16(1) 线程同步

目录 1、概念 2、线程的实现&#xff1a; 3、线程同步&#xff1a; 4、使用信号量&#xff1a; 5、使用信号量实现进程同步&#xff1a; 6、使用互斥锁 7、使用互斥锁实现线程同步 8、读写锁 9、使用读写锁 10、使用读写锁实现进程同步 1、概念 线程&#xff1a;进程…...

深入探讨lowess算法:纯C++实现与局部加权多项式回归的数据平滑技术

引言 在统计学和数据科学中&#xff0c;有时我们面对的数据是嘈杂的、充满噪声的。为了更好地揭示数据的潜在趋势和结构&#xff0c;数据平滑技术成为了一个重要工具。lowess或称为局部加权多项式回归是其中的一种流行方法&#xff0c;它对每一个点给予一个权重&#xff0c;根…...

Sui安全篇|详解零知识证明 (ZKP) Groth16的可塑性

Sui Move允许用户使用Groth16进行高效验证任何非确定性多项式时间&#xff08;Non-deterministic Polynomial time &#xff0c;NP&#xff09;状态。Groth16是一种高效且广泛使用的零知识简洁非交互知识证明&#xff08;Zero-Knowledge Succinct Non-interactive Argument of …...

记录--webpack和vite原理

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 每次用vite创建项目秒建好&#xff0c;前几天用vue-cli创建了一个项目&#xff0c;足足等了我一分钟&#xff0c;那为什么用 vite 比 webpack 要快呢&#xff0c;这篇文章带你梳理清楚它们的原理…...

Windows系统中使用bat脚本启动git bash 并运行指定命令 - 懒人一键git更新

目标 双击"autoGitPull.bat"&#xff0c;自动打开git bash&#xff0c;并cd到项目&#xff0c;逐个git pull&#xff0c;保留git bash窗口展示进度。 脚本 start "" "D:\Program Files\Git\git-bash.exe" -c "echo autoGitPull &&…...

elementui form组件出现英文提示

今天让解决一个bug&#xff0c;是表单组件提示词会出现英文。 问题情景如下&#xff1a; 有时会出现中文&#xff0c;有时会出现英文。 解决方法&#xff1a; 经查看&#xff0c;代码采用的是elementui的form组件&#xff0c;在el-form-item中使用了required属性&#xff0c;同…...

使用windows Api简单验证ISO9660文件格式,以及装载和卸载镜像文件

使用IIsoImageManager接口简单验证ISO镜像文件正确性,使用AttachVirtualDisk装载ISO镜像文件,和使用DetachVirtualDisk卸载,(只支持windows 8及以上系统) 导读 IIsoImageManager 验证ISO文件正确性AttachVirtualDisk 装载镜像文件DetachVirtualDisk 卸载镜像文件其他相关函…...

iPhone 15受益:骁龙8 Gen 3可能缺席部分安卓旗舰机

明年一批领先的安卓手机的性能可能与今年的机型非常相似。硅成本的上涨可能是原因。 你可以想象&#xff0c;2024年许多最好的手机都会在Snapdragon 8 Gen 3上运行&#xff0c;这是高通公司针对移动设备的顶级芯片系统的更新&#xff0c;尚未宣布。然而&#xff0c;来自中国的…...

理解持续测试,才算理解DevOps

软件产品的成功与否&#xff0c;在很大程度上取决于对市场需求的及时把控&#xff0c;采用DevOps可以加快产品交付速度&#xff0c;改善用户体验&#xff0c;从而有助于保持领先于竞争对手的优势。 作为敏捷开发方法论的一种扩展&#xff0c;DevOps强调开发、测试和运维不同团…...

使用OpenCV与深度学习从视频和图像中精准识别人脸: Python实践指南

第一部分: 引言与背景 人脸识别已经成为了当代技术领域中最热门和广泛应用的话题之一。从智能手机的解锁功能到机场的安全检查&#xff0c;人脸识别技术无处不在。在这篇文章中&#xff0c;我们将使用Python中的OpenCV库和深度学习模型&#xff0c;深入探讨如何从视频和图像中…...

面试之快速学习C++11-完美转发,nullptr, shared_ptr,unique_ptr,weak_ptr,shared_from_this

完美转发及其实现 函数模版可以将自己的参数完美地转发给内部调用的其他函数。所谓完美&#xff0c;即不仅能准确地转发参数的值&#xff0c;还能保证被转发参数的左右值属性不变引用折叠&#xff1a;如果任一引用为左值引用&#xff0c;则结果为左值引用&#xff0c;否则为右…...

android resoure资源图片颜色值错乱

最近androidstudio开发&#xff0c;添加一些颜色值或者drawable资源文件时&#xff0c;运行app,颜色值或者图片对应不上&#xff0c;暂时找不到原因&#xff0c;望告知。 暂时解决方法&#xff1a;...

leetcode第 357/358 场周赛

2817. 限制条件下元素之间的最小绝对差 可能别人有更好的解法&#xff0c;我这写法是不断往线段树中插入数值&#xff0c;每次先插入nums[i-x]&#xff0c;然后搜索&#xff08;1到i)中的最大值和(i到max)中的最小值去更新ans。 class Solution { public:struct node{int mx,…...

Jmeter 分布式性能测试避坑指南

在做后端服务器性能测试中&#xff0c;我们会经常听到分布式。那你&#xff0c;是否了解分布式呢&#xff1f;今天&#xff0c;我们就来给大家讲讲&#xff0c;在企业实战中&#xff0c;如何使用分布式进行性能测试&#xff0c;实战过程中&#xff0c;又有哪些地方要特别注意&a…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...