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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...