一、声明和绑定数据
小程序中使用的数据均需要在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)。