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

OpenClaw性能调优:Qwen3-32B在RTX4090D上的参数配置

OpenClaw性能调优&#xff1a;Qwen3-32B在RTX4090D上的参数配置 1. 为什么需要性能调优 当我第一次在RTX4090D上部署Qwen3-32B模型时&#xff0c;本以为高端硬件能轻松应对所有任务。但实际使用OpenClaw执行自动化流程时&#xff0c;却发现响应时快时慢&#xff0c;有时甚至出…...

P15801 [GESP202603 六级] 完全二叉树

[GESP202603 六级] 完全二叉树 https://www.bilibili.com/video/BV1jQAEz3Eir/ 1.4满二叉树与完全二叉树 https://www.bilibili.com/video/BV1T44y1P7Xx/ 数据结构合集 - 二叉树&完全二叉树(定义, 性质) https://www.bilibili.com/video/BV1eQ3RzxEoS/ 202603GESP六级C第2题…...

LTI系统设计避坑指南:因果性与稳定性在实际工程中的5个关键检查点

LTI系统设计避坑指南&#xff1a;因果性与稳定性在实际工程中的5个关键检查点 在数字信号处理领域&#xff0c;线性时不变&#xff08;LTI&#xff09;系统的设计是工程师日常工作的核心。然而&#xff0c;理论推导与工程实践之间往往存在一道鸿沟——许多在数学上完美的系统模…...

SLAM Toolbox应用宝典:从技术原理到实战落地的全面指南

SLAM Toolbox应用宝典&#xff1a;从技术原理到实战落地的全面指南 【免费下载链接】slam_toolbox Slam Toolbox for lifelong mapping and localization in potentially massive maps with ROS 项目地址: https://gitcode.com/gh_mirrors/sl/slam_toolbox SLAM Toolbox…...

OpenClaw 全面解析:Token时代的iPhone如何颠覆开发者工作流?

前言&#xff1a;两周15万Star背后的技术革命 2026年初&#xff0c;一个名为 OpenClaw 的开源项目在 GitHub 上以惊人速度走红——两周内突破 15 万 Star&#xff0c;如今已达 310k Star&#xff0c;成为近年来增速最快的开源项目之一。 黄仁勋在最新访谈中将其称为 “Token时代…...

PyFluent:重新定义CFD仿真自动化的技术革命

PyFluent&#xff1a;重新定义CFD仿真自动化的技术革命 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 行业痛点分析&#xff1a;CFD工程师的效率困境 在现代工程设计流程中&#xff0c;计算流体动力学&#xff08;CFD&#xff09…...

Wan2.2-I2V-A14B部署教程:系统盘50GB+数据盘40GB最小化配置实操

Wan2.2-I2V-A14B部署教程&#xff1a;系统盘50GB数据盘40GB最小化配置实操 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像最大的特点是开箱即用&#xff0c;内置了完整…...

如何高效提取网页SVG内容:3步实现可视化数据导出

如何高效提取网页SVG内容&#xff1a;3步实现可视化数据导出 【免费下载链接】svg-crowbar Extracts an SVG node and accompanying styles from an HTML document and allows you to download it all as an SVG file. 项目地址: https://gitcode.com/gh_mirrors/sv/svg-crow…...

STM32智能婴儿床系统设计与实现

基于STM32的智能婴儿床系统设计1. 项目概述1.1 系统架构本智能婴儿床系统采用模块化设计架构&#xff0c;以STM32F103RCT6微控制器为核心处理单元&#xff0c;集成多种传感器模块和执行机构。系统通过蓝牙与手机APP建立双向通信&#xff0c;实现环境参数监测、异常报警和远程控…...

B站Index-AniSora本地部署避坑指南:4张4090显卡实测+常见错误解决

4张RTX 4090实战&#xff1a;Index-AniSora动漫生成模型深度部署手册 当四张RTX 4090显卡同时亮起RGB灯效时&#xff0c;机箱内涌动的不仅是1.2kW的功耗&#xff0c;更是一个能够将二次元幻想转化为动态画面的数字炼金术工坊。B站开源的Index-AniSora模型正在重新定义独立创作者…...