当前位置: 首页 > 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…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...