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

小程序视图渲染数据和部分事件的绑定

今天依旧使用这个目录进行教学

 数据的渲染 

 在 index.js的 page中定义一个data对象结构是这样的

Page({data:{name:'张三'}
})

在index.wxml 中 利用模板语法进行渲染 

 <view >{{name}}</view>

注意这个模板里边不能使用js的方法

要循环渲染数组,如 在data中定义了以下数组

    list:[{name:'小米',age:18,sex:'男'},{name:'小埋',age:20,sex:'女'},{name:'小光',age:16,sex:'女'},{name:'大平',age:26,sex:'男'},]

   在 index.wxml中进行渲染 

 <view wx:for="{{list}}">姓名{{item.name}}年龄{{item.age}}性别{{item.sex}}</view>

 语法和vue的循环很像,就是叫法不同

事件的分类

微信小程序的事件分为冒泡事件和非冒泡事件

冒泡事件

touchstart:手指触摸动作开始

touchmove:手指触摸后移动

touchcancel:手指触摸动作被打断,如来电提醒,弹窗

touchend:手指触摸动作结束

tap:手指触摸后马上离开

longpress:手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

longtap:手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend:会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart:会在一个 WXSS animation 动画开始时触发

animationiteration:会在一个 WXSS animation 一次迭代结束时触发

animationend:会在一个 WXSS animation 动画完成时触发

touchforcechange:在支持 3D Touch 的 iPhone 设备,重按时会触发

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件

 bind:tap(bindtap) 事件

bind:tap属于点击事件 

 先定义函数

  changenum(e){console.log(e);},

  对函数进行 bind:top事件绑定  点击可以触发该事件

 <view bind:tap="changenum">触发事件</view>

 尝试进行事件的传参

 <view bind:tap="changenum(123)">触发事件</view>

发现报错,看来这种传参方式在微信小程序中是行不通的,接下来介绍微信小程序的传参方式

 <view bind:tap="changenum" data-name="李四">触发事件</view>

    打印e时,发现target下的dataset 可以接受到其参数,可以正常传递参数 

catchtap

  将前面代码中的事件改为 catchtap,发现可以正常执行,这两个的区别就是一个是可以进行事件冒泡的一个是不会进行事件冒泡的 

修改数据 

  changenum(e){console.log(this.data.name);},

 点击后发现可以对其进行获取 开始·尝试修改数据  

  changenum(e){console.log(this.data.name);this.data.name='李四'console.log(this.data.name);},

点击发现数据已经修改,但是视图没有更新,按照vue的说法就是失去了响应式 不要担心有一个微信小程序官方提供的属性 setDate 可完成两个功能 其一是可以 更新数据 其二是可以进行数据的更新

  changenum(e){console.log(this.data.name);this.data.name='李四'this.setData({name:this.data.name})},

成功进行数据的更新

本文章关于微信小程序事件的资料来自

https://www.cnblogs.com/zwh0910/p/13983526.html

相关文章:

小程序视图渲染数据和部分事件的绑定

今天依旧使用这个目录进行教学 数据的渲染 在 index.js的 page中定义一个data对象结构是这样的 Page({data:{name:张三} }) 在index.wxml 中 利用模板语法进行渲染 <view >{{name}}</view> 注意这个模板里边不能使用js的方法 要循环渲染数组&#xff0c;如 在…...

“探索AIGC市场:腾讯元宝APP加入竞争,大模型产品的未来走向与个人选择“

文章目录 每日一句正能量前言使用体验分享独特优势和倾向选择字节豆包百度文心一言阿里通义千问腾讯元宝个人倾向选择结论 未来发展方向技术创新可持续可拓展性用户体验应用场景政府赋能数据安全与隐私保护伦理与社会责任国际合作与竞争结论 后记 每日一句正能量 不管现在有多么…...

node设置镜像源详细教程

在Node.js环境中&#xff0c;你可以通过设置npm或yarn的镜像源来加速依赖包的下载。以下是如何设置npm和yarn的镜像源的详细步骤&#xff1a; 使用npm设置镜像源 临时设置镜像源&#xff1a; 你可以在安装包时临时指定镜像源&#xff0c;例如&#xff1a; npm install package…...

四季变换,制氮机使用注意事项

随着四季的轮回变换&#xff0c;大自然展现着不同的风貌。对于制氮机而言&#xff0c;季节的变换同样会带来不同的使用挑战和注意事项。本文将为您揭示四季变换对制氮机使用的影响&#xff0c;帮助您更好地掌握制氮机的季节使用须知。 春季 温湿度变化&#xff1a;春季温湿度逐…...

如何实现办公终端安全

在网络安全日益严峻的当下&#xff0c;可信白名单作为一种高效的终端安全防护手段&#xff0c;正在逐渐受到业界的广泛关注和应用。本文将简要探讨可信白名单如何实现终端安全的原理、方法及其在实际应用中的优势与挑战。 首先&#xff0c;我们需要了解可信白名单的基本原理。可…...

【云岚到家】-day01-项目熟悉-查询区域服务开发

文章目录 1 云岚家政项目概述1.1 简介1.2 项目业务流程1.3 项目业务模块1.4 项目架构及技术栈1.5 学习后掌握能力 2 熟悉项目2.1 熟悉需求2.2 熟悉设计2.2.1 表结构2.2.2 熟悉工程结构2.2.3 jzo2o-foundations2.2.3.1 工程结构2.2.3.2 接口测试 3 开发区域服务模块3.1 流程分析…...

Docker面试整理-如何进行Docker镜像的构建和发布?

构建和发布 Docker 镜像是 Docker 使用中的一个常见任务,通常涉及编写 Dockerfile、构建镜像以及将其推送到镜像仓库的过程。以下是构建和发布 Docker 镜像的详细步骤: 1. 编写 Dockerfile 首先,你需要创建一个 Dockerfile,这是一个包含了一系列指令的文本文件,用来告诉 D…...

macOS Sequoia 将 Mac 生产力与智能化提升至全新高度 (macOS 15 ISO、IPSW、PKG 下载)

macOS Sequoia 将 Mac 生产力与智能化提升至全新高度 (macOS 15 ISO、IPSW、PKG 下载) iPhone 镜像、Safari 浏览器重大更新、备受瞩目的游戏和 Apple Intelligence 等众多全新功能令 Mac 使用体验再升级 请访问原文链接&#xff1a;https://sysin.org/blog/macOS-Sequoia/&a…...

用户管理与服务器远程管理

用户管理 服务器系统版本介绍 windows服务器系统&#xff1a;win2000 win2003 win2008 win2012 linux服务器系统&#xff1a;Redhat Centos 用户管理 用户概述 &#xff08;1&#xff09;每一个用户登录系统后&#xff0c;拥有不同的操作权限。 &#xff08;2&#xff09;…...

Pytorch 实现简单的 线性回归 算法

Pytorch实现简单的线性回归算法 简单 tensor的运算 Pytorch涉及的基本数据类型是tensor&#xff08;张量&#xff09;和Autograd&#xff08;自动微分变量&#xff09; import torch x torch.rand(5, 3) #产生一个5*3的tensor&#xff0c;在 [0,1) 之间随机取值 y torch.o…...

Django中配置日志

在Django中配置日志的方法非常简单&#xff0c;只需要在 setting 文件中添加配置项&#xff0c;系统会自动生成相应的日志文件&#xff0c;也可以配置调试时显示内容&#xff0c;报错发送邮件等操作。 在setting.py中添加以下配置。 # 日志配置 LOGS_DIRS os.path.join(BASE…...

海外盲盒小程序背后的技术支撑与实现

海外盲盒小程序之所以能够迅速崛起并受到全球消费者的喜爱&#xff0c;除了其独特的商业模式和营销策略外&#xff0c;更重要的是其背后的技术支撑和实现。本文将深入探讨海外盲盒小程序背后的技术支撑及其实现方式。 一、多语言与本地化技术 为了满足全球不同地区消费者的需…...

vue问题记录

vue3 路由跳转携带参数 路由跳转携带参数 query方法 //跳转传参 this.$router.push({path:/home,query: {id:1}}) //接受参数 this.$route.query.id问题&#xff1a;刷新页面&#xff0c;参数会丢失—未解决 将参数存在本地存储中&#xff0c;但是组件销毁时&#xff0c;清…...

Flutter - Material3适配

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 Flutter - Material3适配 对比图具体实现一些组件的变化 代码实现Material2的ThemeDataMaterial3的ThemeData Material3适配官方文档 flutter SDK升级到3.16.0之后 …...

一个有趣的c++案例

1. 源码 #include <stdio.h> #include <stdint.h> #include <iostream>using namespace std;uint8_t a 0; uint8_t b 0;#define MY_LOG#ifdef MY_LOG#define my_log(...) printf(__VA_ARGS__); fflush(stdout)#else #define my_log(...) #endifvoid …...

【python】OpenCV—Background Estimation(15)

文章目录 中值滤波中值滤波得到图像背景移动侦测 学习来自 OpenCV基础&#xff08;14&#xff09;OpenCV在视频中的简单背景估计 中值滤波 中值滤波是一种非线性平滑技术&#xff0c;主要用于数字信号处理&#xff0c;特别是在图像处理中去除噪声。 一、定义与原理 定义&am…...

【Java毕业设计】基于JavaWeb的旅游论坛管理系统

文章目录 摘 要目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 Java编程语言1.4.2 vue技术1.4.3 MySQL数据库1.4.4 B/S结构1.4.5 Spring Boot框架 2 系统需求分析2.1 可行性分析2.2 系统流程2.2.1 操作流程2.2.2 登录流程2.2.3 删除信息…...

讲一下v-model的底层实现原理?

什么是v-model&#xff1f; 在Vue.js中&#xff0c;v-model是一个用于实现双向数据绑定的指令。它通常用于表单控件上&#xff0c;以便能够在视图和数据模型之间自动同步数据。具体来说&#xff0c;当用户在输入框中输入内容时&#xff0c;数据模型会自动更新&#xff1b;当数…...

大模型基础——从零实现一个Transformer(3)

大模型基础——从零实现一个Transformer(1)-CSDN博客 一、前言 之前两篇文章已经讲了Transformer的Embedding,Tokenizer,Attention,Position Encoding, 本文我们继续了解Transformer中剩下的其他组件. 二、归一化 2.1 Layer Normalization layerNorm是针对序列数据提出的一种…...

一二三应用开发平台应用开发示例——概述、应用开发示例简介及创建前后端模块

概述 对于应用开发平台的核心基石——系统管理模块&#xff0c;我精心撰写了一份详尽的说明手册。该手册旨在从使用者的角度出发&#xff0c;不仅全面阐述系统的各项属性和功能&#xff0c;更着重强调使用过程中的注意事项和最佳实践。 在手册的编写过程中&#xff0c;我特别…...

s2-pro快速上手指南:3步完成文本转语音与音色迁移实操手册

s2-pro快速上手指南&#xff1a;3步完成文本转语音与音色迁移实操手册 1. 平台简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本内容转换为自然流畅的语音&#xff0c;并支持通过参考音频实现音色迁移功能。这意味着你可以上传一段参考音频&…...

【大模型工程实践③】RAG 基础架构与完整实现

【大模型工程实践③】RAG 基础架构与完整实现:从0到1跑通 作者:AI学习者 | 来源:大模型工程实践学习系列 | 更新:2026年3月 【理论要点速览】 学习本篇前,建议先掌握以下核心理论(点击跳转): ① 为什么需要RAG? ② RAG vs Fine-tuning vs Long Context的决策框架 ③ …...

别再只盯着ODD了!从特斯拉FSD和华为ADS的实战,聊聊ODC(设计运行条件)到底怎么落地

从特斯拉FSD到华为ADS&#xff1a;ODC实战落地的工程密码 当特斯拉车主在暴雨天启动FSD时&#xff0c;系统会先检查挡风玻璃上的雨滴传感器数据&#xff1b;而华为ADS用户试图在未系安全带状态下激活系统&#xff0c;仪表盘会立即弹出红色警告——这些看似简单的交互背后&…...

PlayCover如何重塑Mac游戏体验?社交与云服务革新玩法深度解析

PlayCover如何重塑Mac游戏体验&#xff1f;社交与云服务革新玩法深度解析 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover PlayCover作为一款开源的Mac iOS模拟器&#xff0c;通过深度整合Discord社交功…...

ECharts Gallery弃用后,这4个替代网站让你轻松搞定数据可视化(附优缺点对比)

ECharts Gallery弃用后&#xff0c;这4个专业级替代方案深度评测 当ECharts官方Gallery宣布停止维护时&#xff0c;许多数据可视化开发者突然失去了一个重要的灵感来源和代码参考平台。作为国内最流行的可视化库之一&#xff0c;ECharts的生态系统中其实还隐藏着多个高质量的替…...

从AlexNet到MobileNet:深度可分离卷积如何用1/4参数量实现高效推理?

从AlexNet到MobileNet&#xff1a;深度可分离卷积如何用1/4参数量实现高效推理&#xff1f; 在移动互联网时代&#xff0c;AI模型部署正经历从云端到边缘的范式转移。当我们谈论"高效推理"时&#xff0c;实际上是在探讨一个核心矛盾&#xff1a;如何在有限的硬件资源…...

硬件工程师职业发展路径与核心技术解析

硬件工程师的职业发展路径与技术深度探讨1. 行业现状与职业定位1.1 硬件工程师的职责演变现代硬件工程师的职责范围已从传统的电路设计扩展到系统集成、信号完整性分析、EMC设计等多个领域。典型的职责矩阵包括&#xff1a;职责类别传统要求现代扩展要求电路设计原理图绘制、PC…...

AI智能应用开发(Java)从起点到终点-面向对象

自定义对象Java中自定义对象的必要性就像我们之前用的Scanner 和Random 都是java里面已经写好的对象&#xff0c;直接拿来用就好了&#xff0c;不用再自己写一大串代码来实现键盘录入和随机数的需求&#xff0c;但是有些需求是java中没有定义和写好的&#xff0c;&#xff0c;但…...

Docker 容器中文字体及 matplotlib 环境应用

为了避开 Noto CJK 这种复杂的 TTC(TrueType Collection)大包带来的识别问题,最理想的选择是使用独立打包的 OTF 或 TTF 字体。 0. 环境检查 # 1. 更新源并安装 fontconfig apt-get update apt-get install -y fontconfig# 2. 现在 fc-cache 命令可用了,刷新系统字体 fc-…...

告别手动画框!OrCAD Capture 快速创建复合封装(附电源/地引脚处理技巧)

高效创建OrCAD复合封装的进阶技巧与避坑指南 在PCB设计流程中&#xff0c;原理图封装的创建往往是项目前期最耗时的环节之一。尤其是面对多通道运放、复杂电源管理芯片或模块化器件时&#xff0c;传统的手动绘制方式不仅效率低下&#xff0c;还容易因引脚属性设置不当导致后续D…...