Avalon2 的 ms-for 绑定集齐了 ms-repeat, ms-each, ms-with 的所有功能， 更加好用， 性能也提升了很多。
Avalon 不需要 vue 或 react 那样使用 key 属性来提高性能，内部已经帮你搞定了。
循环数组
ms-for 循环数组示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo Avalon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./avalon.js"></script>
<script type="text/javascript">
var vm = avalon.define({
$id: "maincontainer",
arr: ['上海', '北京', '广州', '深圳']
})
</script>
<style>
.ms-controller {
display: none;
}
</style>
</head>
<body>
<div>
<div ms-controller="maincontainer">
<ul>
<li ms-for="($index,el) in @arr">{
{$index+'：'+el}}</li>
</ul>
</div>
</div>
</body>
</html>
页面效果：
ms-for 支持下面的元素节点继续使用 ms-for，形成双重循环与多级循环；但双重循环必须对应的二维数组，几维循环对应几维数组。
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo Avalon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./avalon.js"></script>
<script type="text/javascript">
var vm = avalon.define({
$id: "maincontainer",
arr: [
{
item: ['上海', '北京', '广州', '深圳'] },
{
item: ['上海', '北京', '广州', '深圳'] },
{
item: ['上海', '北京', '广州', '深圳'] },
{
item: ['上海', '北京', '广州', '深圳'] }
]
})
</script>
<style>
.ms-controller {
display: none;
}
</style>
</head>
<body>
<div>
<div ms-controller="maincontainer">
<ul>
<li ms-for="el in @arr">
<div ms-for='($index,piece) in el.item'>{
{$index+'：'+piece}}</div>
</li>
</ul>
</div>
</div>
</body>
</html>
页面效果：
循环对象
ms-for 循环对象示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo Avalon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./avalon.js"></script>
<script type="text/javascript">
var vm = avalon.define({
$id: "maincontainer",
styleInfo: {
width: 400,
height: 400,
borderWidth: 1,
borderColor: "green",
borderStyle: "solid",
backgroundColor: "gray"
}
})
</script>
<style>
.ms-controller {
display: none;
}
</style>
</head>
<body>
<div>
<div ms-controller="maincontainer">
<div ms-for='(key,el) in @styleInfo'>
<label>{
{ key +':'+ el }}</label>
<input type="text" ms-duplex="@styleInfo[key]">
<!--不能ms-duplex="el"，下面是使用ms-duplex="el"的效果，用来做对比-->
<input type="text" ms-duplex="el">
</div>
</div>
</div>
</body>
</html>
页面效果：
