1、声明和绑定数据
- 小程序页面中使用的数据均需要在
Page()方法的data对象中进行声明定义 - 在将数据声明好以后，需要在
WXML中绑定数据，数据绑定最简单的方式是使用Mustache 语法（双大括号）将变量包起来。 - 在
{{ }}内部可以做一些简单的运算，支持如下几种方式：- 算数运算
- 三元运算
- 逻辑判断
- 其他…
Page({// 在小程序页面中所需要使用的数据均来自于 data 对象data: {id: 1,isChecked: false,school: 'xxx',obj: {name: 'tom'}}
})
<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 --><!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view><!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view><!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" /><!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view><!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view><!-- 逻辑判断 -->
<view>{{ id === 1 }}</view><!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>
2、修改数据
- 小程序中修改数据并不能直接进行赋值，而是要通过调用
this.setData方法才能实现 - 将需要修改的数据以
key:value的形式传给this.setData方法。 this.setData方法有两个作用：- 更新数据
驱动视图更新
Page({// 页面的初始数据data: {num: 1,userInfo: {name: 'Tom',age: 10,gender: '男'},animalList: ['Tom', 'Jerry', 'Spyke']},updateData() {this.setData({// key 是需要修改的数据// value 是最新值num: this.data.num + 1,userInfo: {} // 用一个新对象替换原对象，数组同理})// 修改对象中的多个属性this.setData({'userInfo.name': 'Jerry','userInfo.age': 100})// 修改数组中的属性this.setData({'animalList[2]': 'Tyke' })}
}
3、数据绑定-简易双向绑定
在 WXML 中，普通属性的绑定是单向的，例如：
<input value="{{ num }}" />
如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。
但如果用户修改了输入框里的值，却不会同时改变 data 中的 num 。
如果需要在用户输入的同时也将 data 中的数据修改 ，需要借助简易双向绑定机制。
此时可以在对应项目之前加入 model: 前缀即可，例如：
<input model:value="{{ value }}" />
如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。
如果输入框的值被改变了， data 的数据也会随着改变。
4、数据监听
数据监听器可以用于监听和响应任何属性和数据字段的变化，有时，需要在一些数据字段被 setData 设置时，需要执行一些操作。那么就可以使用 observers 数据监听器来实现。语法如下：
Component({data: {num: 10,count: 1,obj: { name: 'Tom', age: 10 },arr: [1, 2, 3]},observers: {// key 是需要检测数据// value 是一个函数，函数接收一个形参作为参数，是最新的值num: function(newNum) {console.log(newNum)},// 数据监听器支持监听属性或内部数据的变化，可以同时监听多个'num, count': function (newNum, newCount) {console.log(newNum, newCount)}// 监听器可以监听子数据字段'obj.age': function(newAge) {console.log(newAge)},// 如果需要监听所有子数据字段的变化，可以使用通配符 ** 'obj.**': function(newAge) {console.log(newAge)},'arr[0]': function (val) {}}
})
)
