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

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

发布时间:2026/9/26 11:08:17 来源:云帆数科 栏目:资讯中心
案例 3.4 微信小程序数据和事件绑定(新增学生专业属性)
前言本次案例《3.4 数据和事件绑定》练习微信小程序数据绑定与事件绑定在原有学生对象结构基础上新增专业属性实现页面展示学生信息通过按钮事件修改数据。一、知识点说明数据绑定WXML 使用{{ }}插值语法把 js 里 data 中的数据渲染到页面。事件绑定bindtap绑定点击事件触发 JS 函数修改 data 里的数据页面自动更新。修改要求学生结构体新增major专业字段。二、完整代码pages/index/index.jsPage({ data: { // 学生对象新增专业major属性 student:{ name:林嘉恒, age:20, major:软件工程 } }, // 点击事件修改学生信息 changeInfo(){ this.setData({ student.name:小明, student.age:21, student.major:计算机科学与技术 }) } })pages/index/index.wxmlview学生信息展示/view view姓名{{student.name}}/view view年龄{{student.age}}/view view专业{{student.major}}/view button bindtapchangeInfo点击修改学生信息/buttonpages/index/index.wxss可选美化页面view{ margin:10rpx; font-size:32rpx; } button{ margin-top:30rpx; }三、运行效果页面加载自动渲染 data 中学生的姓名、年龄、专业。点击按钮触发changeInfo事件。this.setData()修改 student 对象页面视图自动刷新专业同步更新。原理小程序是数据驱动修改 data视图自动更新不需要手动操作 DOM。四、核心要点总结{{变量名}}单向数据绑定读取 data 数据渲染页面。bindtap用来绑定点击事件。修改 data 必须使用this.setData()直接赋值不会刷新页面。对象属性写法student.major可以单独修改对象里面的字段。五、小结本案例掌握小程序数据绑定与事件绑定完成学生对象扩展增加专业属性。理解小程序数据驱动思想是小程序表单、列表开发的基础。

相关推荐

【万字长文】一文精通使用Cursor:从配置到实战的完整指南
【万字长文】一文精通使用Cursor:从配置到实战的完整指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 11:08:17

毕业生AI论文工具链怎么配 TaoToken:从文献整理到成稿的 settings.json 骨架
毕业生AI论文工具链怎么配 TaoToken:从文献整理到成稿的 settings.json 骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 11:08:17

数智码力:Python字符串处理大全!日常文本操作一键搞定
数智码力:Python字符串处理大全!日常文本操作一键搞定

文本处理属于最频繁出现的实践应用场景之一, 在日常办公活动里进行文字整理、数据清理、内容解析以及批量修改文件内容等事务时, 都是无法离开字符串操作环节的。很多初学者在面对文本处理工作场合,仅仅能够使用基础的拼接和切片方法, 一旦遭遇复杂的替换、分割、去除空格、格式… · 2026/9/26 11:08:11

从免费CRM到私有化部署:永久在线的客户管理平台怎么选
从免费CRM到私有化部署:永久在线的客户管理平台怎么选

1. “Deskcomm”这个名字里,藏着CRM最容易被忽视的两件事第一次看到DeskcommCRM这个名字,我其实愣了一下。市面上叫“XX CRM”的系统太多了,什么云CRM、社交CRM、SCRM,名字一个比一个抽象。但 Deskcomm 拆开看是Desk和comm&#x… · 2026/9/26 15:11:50

27届大模型面试准备(六十三):TaoToken 统一 Key 下推理前缀缓存与语义缓存工程——从 KV 复用到语义命中降本
27届大模型面试准备(六十三):TaoToken 统一 Key 下推理前缀缓存与语义缓存工程——从 KV 复用到语义命中降本

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 15:11:50

SDN本质是网络服务编排:从控制分离到可编程交付
SDN本质是网络服务编排:从控制分离到可编程交付

1. 这不是概念科普,是网络工程师的实操认知重建“一文让你彻底搞懂什么是SDN”——这句话我第一次看到时,下意识点开又立刻关掉。不是不想学,而是过去三年里,我已经在三类不同场景中亲手部署、调试、排障过SDN系统:某省… · 2026/9/26 15:11:50

Docker 亲自下场了:把 OpenClaw 关进沙盒,你的 API 密钥再也不会“裸奔“了|TaoToken 统一 Key 通道配置实战
Docker 亲自下场了:把 OpenClaw 关进沙盒,你的 API 密钥再也不会“裸奔“了|TaoToken 统一 Key 通道配置实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 15:11:50

多重假设检验校正:FDR、q值与Benjamini-Hochberg方法详解
多重假设检验校正:FDR、q值与Benjamini-Hochberg方法详解

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 15:11:50

WorkBuddy+腾讯乐享:打造企业知识库智能问答助手
WorkBuddy+腾讯乐享:打造企业知识库智能问答助手

1. 为什么企业知识库总是“建了没人用”——先把问题看透先说个各位可能都遇到过的情况:公司买了一套知识库系统,行政催着大家上传文档,每个部门都交了PPT和制度文件,IT搭好了分类目录,甚至配了全文检索。三个月后再看… · 2026/9/26 15:11:43

数据库课后习题答案别硬背:当测试用例集刷,效率翻倍
数据库课后习题答案别硬背:当测试用例集刷,效率翻倍

简介:万常选版《数据库原理与设计》课后习题答案资源,覆盖第2至6章及第9章,适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件,含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21

OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置
OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40

向下兼容与向上兼容:接口设计中的兼容性策略与工程实践
向下兼容与向上兼容:接口设计中的兼容性策略与工程实践

一次版本升级事故,是很多团队绕不过去的坎。线上环境里,服务端明明已经上线了新版接口,老的移动端还在照着旧文档传参数。请求一到网关,校验直接拒绝,用户操作失败,客服群炸了锅,开发群里开始互… · 2026/9/26 0:00:46

了解更多?预约专属演示

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

企业微信二维码