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

前言

本次案例《3.4 数据和事件绑定》，练习微信小程序数据绑定与事件绑定，在原有学生对象结构基础上，新增专业属性，实现页面展示学生信息，通过按钮事件修改数据。

一、知识点说明

1. 数据绑定：WXML 使用{{ }}插值语法，把 js 里 data 中的数据渲染到页面。
2. 事件绑定：bindtap绑定点击事件，触发 JS 函数修改 data 里的数据，页面自动更新。
3. 修改要求：学生结构体新增major（专业）字段。

二、完整代码

pages/index/index.js

Page({ data: { // 学生对象，新增专业major属性 student:{ name:"林嘉恒", age:20, major:"软件工程" } }, // 点击事件：修改学生信息 changeInfo(){ this.setData({ "student.name":"小明", "student.age":21, "student.major":"计算机科学与技术" }) } })

pages/index/index.wxml

<view>学生信息展示</view> <view>姓名：{{student.name}}</view> <view>年龄：{{student.age}}</view> <view>专业：{{student.major}}</view> <button bindtap="changeInfo">点击修改学生信息</button>

pages/index/index.wxss（可选，美化页面）

view{ margin:10rpx; font-size:32rpx; } button{ margin-top:30rpx; }

三、运行效果

1. 页面加载，自动渲染 data 中学生的姓名、年龄、专业。
2. 点击按钮触发changeInfo事件。
3. this.setData()修改 student 对象，页面视图自动刷新，专业同步更新。

原理：小程序是数据驱动，修改 data，视图自动更新，不需要手动操作 DOM。

四、核心要点总结

1. {{变量名}}单向数据绑定，读取 data 数据渲染页面。
2. bindtap用来绑定点击事件。
3. 修改 data 必须使用this.setData()，直接赋值不会刷新页面。
4. 对象属性写法："student.major"可以单独修改对象里面的字段。

五、小结

本案例掌握小程序数据绑定与事件绑定，完成学生对象扩展，增加专业属性。理解小程序数据驱动思想，是小程序表单、列表开发的基础。