第13课：数据绑定
进度 0/30
🔗
数据绑定
数据一变，页面跟着变
📖知识引入
🏷️{{}}是数据窗口
WXML里写{{motto}}，页面就显示data里的motto值。数据变了，显示自动跟着变——这叫数据绑定。
📤setData唯一通道
改数据必须用this.setData({ motto: '新值' })。直接改this.data.motto页面纹丝不动！记住：setData是唯一大门。
📋wx:for列表渲染
数组配上wx:for，每项自动生成一个标签，像盖章机批量产出——商品列表、账单列表全靠它。
🚦wx:if条件渲染
wx:if="{{isVip}}"条件成立才显示。配合wx:else，能让页面元素按需出现或消失。
🔄单向数据流
数据→页面自动同步；页面→数据要靠事件（如输入框bindinput）把值写回。理解这条河的流向，小程序就懂了一半。
💡
更新页面只有一条路：this.setData()，别无他法！
🔍数据流动全景图
<!-- WXML -->
<view class="count">{{count}}</view>
<button bindtap="add">+1</button>
<!-- 循环渲染列表 -->
<view wx:for="{{list}}" wx:key="id">
<text>{{item.name}}</text>
</view>
// JS
Page({
data: { count: 0 },
add() {
this.setData({ count: this.data.count + 1 })
}
})数据流动的方向：
data: {count: 0}
│
▼ {{count}}自动显示
页面显示 0
▲
│ setData({count: 1})
点+1→add()执行
│
▼ 自动刷新
页面显示 1
❌ 错误示范： this.data.count = 100 （数据变了，页面纹丝不动）
✅ 正确姿势： this.setData({ count: 100 }) （页面立刻更新）
记住：setData是数据 进入页面的唯一大门！
🎯小测验
第1题：WXML中显示data里的数据，用什么语法？
第2题：想让页面上的数字更新，必须调用？
第3题：要显示一个商品列表，WXML用哪个指令？
📝本课知识点
- ✓{{}}把数据显示到页面
- ✓setData是更新数据的唯一通道
- ✓wx:for批量渲染列表
- ✓wx:if按条件显示隐藏
- ✓数据流：数据→页面自动，页面→数据靠事件
第13课完成！继续探索下一课吧 🚀