一、声明和绑定数据
小程序中使用的数据均需要在Page()方法的data对象中进行声明定义。
在WXML使用Mustache语法（双大括号{{ }}）将变量包起来，从而进行数据绑定。
在{{ }}语法中，只能写表达式，不能写语句，也不能调用js相关的语法。
html
<!-- 展示数据 -->
<view>{{ name }}</view>
html
<!-- 绑定属性值 -->
<checkbox checked="{{true}}"/>二、修改数据
通过调用setData()方法进行修改，setData()接收对象作为参数，key是需要修改的数据，value是最新的值。
setDate()方法作用：
1、更新数据
2、驱动视图更新
不推荐使用赋值的方法进行修改，通过赋值的方式修改数据无法改变页面的数据。
- 修改/新增
javascript
this.setData({
//如果对象新增属性，可以将key写成数据路径的方式
'userInfo.name':"tom",
'userInfo.age':10
})简化新增和修改，使用ES6提供的展开运算符或Object.assign()方法 。
javascript//ES6提供的展开运算符... //通过展开运算符能够将对象中的属性复制给另一个对象，后面的属性会覆盖前面的属性 const userInfo={ ...this.data.userInfo, name:"jerry", age:18 } this.setData({userInfo:userInfo}) //键和值一样可简写为this.setData({userInfo})
javascript//Object.assign()方法 //将多个对象合并为一个对象 const userInfo=Object.assign(this.data.userInfo,{name:"tom"},{age:18}) this.setData({userInfo:userInfo})//键和值一样可简写为this.setData({userInfo})
- 删除
javascript
//删除单个属性
delete this.data.userInfo.age
this.setData({
userInfo:this.data.userInfo
})
//删除多个属性，可以使用ES6提供的rest剩余参数
const{name,age,...rest}=this.data.userInfo
this.setData({
userInfo:rest
})三、修改数组类型数据
- 新增
javascript
updateList(){
// 新增数组元素
// push方法
this.data.list.push(6)
this.setData({list:this.data.list})
// concat方法
const newList=this.data.list.concat(7)
this.setData({list:newList})
// 使用展开运算符
const newList=[...this.data.list,8]
this.setData({list:newList})
}- 修改
javascript
// 修改数组元素
//方法一
this.setData({"list[1]":6})
//方法二
this.setData({"list[0].name":"jerry"})- 删除
javascript
// 删除数组元素
// 方法一
this.data.list.splice(1,2)
this.setData({list:this.data.list})
//方法二
const newList=this.data.list.filter(item=> item!==2)
this.setData({list:newList})四、双向数据绑定
即用户输入的数据可以改变页面，在对应属性之前添加model**:**前缀。
html
<!-- 数据单向绑定，数据能够影响页面，但是页面更新不会影响到数据 -->
<input type="text" value="{{value}}"/>
<!-- 数据双向绑定，数据能够影响页面，页面更新也会影响到数据 -->
<!-- 添加model:属性 -->
<input type="text" model:value="{{value}}"/>五、列表渲染
通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上。可通过使用wx.for属性绑定一个数组或对象，可使用每一项数据重复渲染当前组件，每一项的变量名默认为item，下标变量名默认为index。
html
<!-- 渲染数组，item：数组的每一项，index：下标 -->
<view wx:for="{{numList}}">{{item}}-{{index}}</view>
<!-- 渲染对象，item:对象属性的值，index：对象属性 -->
<view wx:for="{{obj}}">{{item}}-{{index}}</view>使用wx.for遍历时，建议加上wx:key属性，添加wx:key属性值时，不需要使用双大括号语法，直接使用遍历的array中item的某个属性。
wx.key的值以两种形式提供：
1、字符串：代表需要遍历的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字*this代表在for循环中的item本身，当item本身是一个唯一的字符串或数字时可以使用。
html<!-- wx:key两种添加方式 --> <!-- 方式1，写成字符串，需要是遍历的数组中item的某个属性，要求该属性是列表中唯一的字符串或数字，不能进行动态改变。 --> <view wx:for="{{fruitList}}" wx:key="id">{{item.name}}</view> <!-- 方式2，保留关键字*this，*this代表的是item本身，item本身是唯一的字符串或数字。 --> <view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
六、更改默认的变量名和下标
可以使用wx:for-item和wx:for-index对默认的变量名和下标进行更改。
- 使用wx:for-item可以指定数组当前元素的变量名
- 使用wx:for-index可以指定数组当前下标的变量名
html
<!-- 更改默认的变量名和下标(数组) -->
<view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
{{fruitIndex}}-{{fruitItem.name}}
</view>
<!-- 更改默认的变量名和下标(对象) -->
<view wx:for="{{obj}}" wx:key="index" wx:key="id" wx:for-item="value" wx:for-index="key">
{{key}}-{{value}}
</view>七、渲染一个包含多个节点的结构块
在<block/>标签上使用wx:for。
- <block/>并不是一个组件，仅是一个包装元素，不会在页面上做任何渲染，只接受控制属性（可以在页面中展示，但是在调试器WXML中不展示）
- <block/>在wxml中可用于组织代码结构，支持列表渲染、条件渲染等。
html
<block wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
<view >名字：{{fruitItem.name}}</view>
<view>价格：{{fruitItem.price}}</view>
</block>八、条件渲染
主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：
1、使用wx:if 、wx:elif、wx:else属性组
html
<view wx:if="{{num===1}}">num等于{{num}}</view>
<view wx:elif="{{num===2}}">num等于{{num}}</view>
<view wx:else>num大于2，num等于{{num}}</view>2、使用hidden属性
html
<!-- 定义isFlag为true -->
<view hidden="{{ !isFlag }}">如果isFlag是true则展示结构，否则隐藏结构</view>两者区别：
1、wx:if：当条件为true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式实现。
2、hidden：当条件为true时会将结构隐藏，否则结构会展示出来，通过display样式属性来实现(display:none)。