广州市天河区天河路621号天娱广场西塔10楼
EAIC前端mvvm框架
用each遍历
可以用each来遍历一个列表。数组和对象都可以认为是列表。
对于数组来说，则是遍历数组的每个元素，对于对象来说，则是遍历它的每个属性。
<script>
$.vm({
data:{
myArr:[{
id:1,
name:"Jack"
},{
id:2,
name:"Rose"
},{
id:3,
name:"Michell"
}],
myObj:{
name:"Mike",
age:20,
addr:"BeiJing"
}
},
event:{
onLoad:function () {
},
}
});
</script>
<style>
//这里是页面样式定义
</style>
<page-template>
<each cond="myArr" item="item" index="index">
<div>index:${index}</div>
<div>id=${item.id},name=${item.name}</div>
</each>
<each cond="myObj" item="val" index="propName">
<div>${propName}=${val}</div>
</each>
</page-template>
运行效果：
index:0
id=1,name=Jack
index:1
id=2,name=Rose
index:2
id=3,name=Michell
name=Mike
age=20
addr:BeiJing
反向遍历
只需要将关键字each替换为eachr，即可达到反向遍历的效果。
遍历分支
当遍历或反向遍历的条件不满足时(空数组或没有属性的对象或null)，则渲染它的分支节点，我们使用else来定义遍历的分支节点。
以下情况视为不满足
- null 值
- 空数组
- 空对象
- 值不是可遍历的数据类型
<script>
$.vm({
data:{
myArr:[],
},
event:{
onLoad:function () {
},
}
});
</script>
<style>
//这里是页面样式定义
</style>
<page-template>
<each cond="myArr" item="item" index="index">
<div>index:${index}</div>
<div>id=${item.id},name=${item.name}</div>
</each>
<else>
数组为空
</else>
</page-template>
运行效果：
数组为空
