前言本次案例《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可以单独修改对象里面的字段。五、小结本案例掌握小程序数据绑定与事件绑定完成学生对象扩展增加专业属性。理解小程序数据驱动思想是小程序表单、列表开发的基础。