微信小程序案例3.4 数据和事件绑定

微信小程序案例3.4 数据和事件绑定一、实验目的掌握微信小程序Mustache双大括号{{}}单向数据绑定语法。掌握普通变量、对象、数组的数据绑定写法。掌握事件绑定bind:tap实现按钮点击事件。掌握this.setData()方法修改逻辑层data数据并更新视图页面。在student对象中新增major专业属性页面展示专业信息点击按钮同步更新专业。二、实验环境微信开发者工具新建空白小程序项目不使用云服务、不使用模板。三、实验原理Mustache语法单向数据绑定使用{{ }}数据从js逻辑层流向wxml视图层只能单向传递。对象绑定语法{{对象名.属性名}}数组绑定语法{{数组[下标]}}bind:tap绑定按钮点击事件触发js中定义的事件处理函数。this.setData()是小程序专门用来更新页面数据的API修改data里面的数据将数据发送到视图层驱动页面刷新直接赋值this.data.xxx页面不会更新。四、实验内容本案例实现多种数据绑定效果算术运算绑定、对象绑定、数组绑定。页面展示学生学号、姓名、生日、新增专业字段。点击【修改绑定数据】按钮调用modify事件函数执行setData页面全部数据同步改变。1.index.wxml代码scroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle各种类型的数据绑定示例/viewviewclasstxt-styleview算术运算绑定{{a}}{{b}}{{c}}{{a b c}}/viewview对象绑定--学号{{student.stuId}}/viewview对象绑定--姓名{{student.name}}/viewview对象绑定--生日{{student.birthDay}}/viewview对象绑定--专业{{student.major}}/viewview数组绑定--array[0]{{array[0]}}/viewview数组绑定--array[1]{{array[1]}}/viewview数组绑定--array[2]{{array[2]}}/view/viewbuttontypeprimarybind:tapmodify修改绑定数据/button/view/scroll-view2.index.js代码Page({data:{a:10,b:20,c:30,student:{stuId:20250822,name:张三,birthDay:2005-09-01,major:软件工程和大数据},array:[2023,2024,2025]},modify(){this.setData({a:100,b:200,c:300,student:{stuId:20220123,name:李四,birthDay:2002-12-10,major:计算机科学与技术},array:[2018,2019,2020]})}})3.index.wxsspage{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.txt-style{font-size:40rpx;line-height:2em;margin-left:20rpx;}4.app.wxss.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title{font-size:40rpx;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}5.app.json{pages:[pages/index/index],window:{navigationBarTitleText:数据和事件绑定,navigationBarTextStyle:black},style:v2,sitemapLocation:sitemap.json}五、运行效果初始页面算术运算10203060学生信息张三专业软件工程和大数据数组内容2023、2024、2025。点击【修改绑定数据】按钮触发modify事件页面数据全部刷新。算术运算变成100200300600学生变为修改后的内容专业变为修改后的内容数组更新为2018、2019、2020。六、实验总结wxml使用{{}}Mustache语法实现单向数据绑定数据只能从js逻辑层流向页面视图。对象取值使用对象.属性名数组取值使用数组[下标]。通过bind:tap绑定按钮点击事件执行js事件处理函数。修改页面data数据必须使用this.setData()直接修改this.data页面不会刷新渲染。完成作业拓展给student对象增加major专业属性初始化和setData更新时都可以正常渲染到页面。