首页/新闻资讯/正文详情

微信小程序案例 3.4 数据和事件绑定(新增学生专业属性)

发布时间:2026/9/24 2:31:31 来源:云帆数科 栏目:资讯中心
微信小程序案例 3.4 数据和事件绑定(新增学生专业属性)
markdown# 微信小程序案例3.4 数据和事件绑定新增学生专业属性 ## 一、案例需求介绍 本案例为微信小程序数据绑定与事件绑定练习。 基础要求完成数据绑定、点击事件绑定。 拓展修改在学生的对象结构里面**增加专业major属性**。 功能效果页面渲染学生姓名、年龄、专业点击按钮触发事件修改全部学生信息并刷新视图。 ## 二、开发思路 1. 在Page的data中定义student对象包含name、age额外添加major专业属性。 2. wxml使用双大括号{{}}完成**数据绑定**把学生信息展示到页面。 3. 在button上用bindtap绑定点击事件函数changeInfo实现**事件绑定**。 4. 在事件函数内调用setData修改student对象小程序自动更新页面视图。 5. 模拟器运行测试验证初始信息和点击修改后的信息确认专业属性正常显示、更新。 知识点 1. 插值语法 {{}}单向数据绑定把js数据渲染到wxml页面。 2. bindtap绑定点击事件。 3. setData唯一修改data并更新页面的方法。 ## 三、关键代码 ### index.wxml xml view classbox view学生信息/view view姓名{{student.name}}/view view年龄{{student.age}}/view view专业{{student.major}}/view button bindtapchangeInfo点击修改学生信息/button /viewindex.jsjs运行Page({ data: { // 学生结构体增加专业major属性 student:{ name:张三, age:20, major:软件工程 } }, changeInfo(){ this.setData({ student:{ name:李四, age:21, major:大数据技术 } }) } })app.jsonjson{ pages:[ pages/index/index ], window:{ navigationBarTitleText:案例3.4 数据和事件绑定 }, sitemapLocation:sitemap.json }四、运行效果页面加载初始展示姓名张三年龄 20专业软件工程。 点击按钮后页面刷新变成李四年龄 21专业大数据技术。 粘贴截图模拟器初始界面、点击按钮之后的界面两张截图五、遇到的问题与解决总结问题新增专业属性页面不显示 原因只在 js 加了 major忘记在 wxml 写{{student.major}}。 解决wxml 中把专业字段写出来。问题直接给 data 赋值页面不变 错误写法this.data.student.namexxx页面不会刷新。 原理必须用setData通知小程序更新视图。拼写错误bindtap 写成 bindTap 导致事件不触发 小程序事件区分大小写必须小写 bindtap。六、开发总结本案例学习小程序数据绑定和事件绑定。 数据绑定使用插值表达式将逻辑层的数据渲染到视图层 事件绑定用 bindtap 绑定点击回调函数 setData 用来修改数据并且驱动页面刷新。

相关推荐

别再只会调库了!手撕大厂面试题:qsort 底层泛型实现与 AI 框架内存寻址的秘密
别再只会调库了!手撕大厂面试题:qsort 底层泛型实现与 AI 框架内存寻址的秘密

开场白:为什么面试官总爱让你手撕 qsort?去大厂面试 C/C 岗位,如果面试官让你写个排序,你直接秒答 qsort(arr, n, sizeof(int), cmp);,大概率会收获一句礼貌的“回去等通知”。为什么?因为调库只能证明你“… · 2026/9/24 2:31:31

文献搜索神器实用指南 高效助力科研文献检索与内容筛选的高效工具推荐
文献搜索神器实用指南 高效助力科研文献检索与内容筛选的高效工具推荐

每次找到心仪的外国文献,却被付费墙冷冷地挡在外面,是不是感觉科研的热情瞬间被浇灭?作为学生党,我太懂这种无力感了。但好消息是,通过几个合法且免费的“通道”和技巧,我们完全能实现“文献自由”。今天分… · 2026/9/24 2:31:25

Apache DolphinScheduler 资源中心(Resource Center)完全指南:文件管理、任务组与多存储后端集成
Apache DolphinScheduler 资源中心(Resource Center)完全指南:文件管理、任务组与多存储后端集成

任务调度大数据后端前端 【免费下载链接】dolphinscheduler Apache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code 项目地址: https://gitcode.com/gh_mirrors/do/dolphinscheduler 点击查… · 2026/9/24 2:31:06

从对话窗口到办公文档:AI内容导出这件事,为什么值得单独做个工具
从对话窗口到办公文档:AI内容导出这件事,为什么值得单独做个工具

导出的本质,是一次跨格式的语义翻译 AI对话窗口里的内容看起来像一篇文章,但它并不是。它是一组由前端渲染器实时拼装的结构:角色标签、时间戳、Markdown标题、LaTeX公式、Mermaid图表定义、代码块、表格。这些东西在浏览器里显示正常&#x… · 2026/9/24 3:17:33

Orleans 失败处理实战:未知结果、幂等去重与重试策略设计
Orleans 失败处理实战:未知结果、幂等去重与重试策略设计

后端微服务 【免费下载链接】orleans Cloud Native application framework for .NET 项目地址: https://gitcode.com/gh_mirrors/or/orleans 点击查看 免费下载 本文围绕 Orleans 官方部署指南 handling-failures.md 展开,系统讲解 .NET 云原生框架 Orl… · 2026/9/24 3:17:33

Mineradio 安全策略与隐私边界:版本支持、纯净安装与敏感数据防护指南
Mineradio 安全策略与隐私边界:版本支持、纯净安装与敏感数据防护指南

桌面应用音视频 【免费下载链接】Mineradio-paused 一款以电影镜头、粒子视觉和歌词舞台为核心的沉浸式音乐播放器。 项目地址: https://gitcode.com/gh_mirrors/mi/Mineradio-paused 点击查看 免费下载 本文基于 Mineradio 开源仓库的 SECURITY.md 编写&#xff0… · 2026/9/24 3:17:21

金舟军谢宁DOE培训课程
金舟军谢宁DOE培训课程

谢宁DOE培训 培训课程大纲 一.培训目的:通过本课程的学习,使学员能掌握谢宁(Shainin)DOE工具解决工艺过程质量问题。 二.培训对象:产品设计开发人员、工艺设计开发人员、质量人员、管理质量工程师和现场工程师。 三.培训课程内容 1.谢宁系统ShaininSyste… · 2026/9/24 3:16:44

spotifyd 的 systemd 服务化运行完全指南:用户级与系统级部署、单元文件解析与踩坑规避
spotifyd 的 systemd 服务化运行完全指南:用户级与系统级部署、单元文件解析与踩坑规避

音频后端 【免费下载链接】spotifyd A spotify daemon 项目地址: https://gitcode.com/gh_mirrors/sp/spotifyd 点击查看 免费下载 本篇技术指南围绕 docs/src/advanced/systemd.md 展开,系统讲解如何在 systemd 发行版上把 spotifyd 部署为常驻后台服务… · 2026/9/24 3:16:38

2026年重庆火锅底料不添加香精推荐:从配料表到生产工艺判断
2026年重庆火锅底料不添加香精推荐:从配料表到生产工艺判断

2026年选择重庆火锅底料“不添加香精”,不能只看包装上的宣传词,更应该直接查看配料表、产品标准以及企业的生产和质量管理能力。需要注意的是,“不添加香精”与“完全没有食品添加剂”不是同一个概念,消费者不应把两个概念混在一… · 2026/9/24 3:16:08

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码