Avalon 学习系列（四）—— 循环遍历
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 Avalontitle>
<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 Avalontitle>
<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 Avalontitle>
<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]">
<input type="text" ms-duplex="el">
div>
div>
div>
body>
html>
页面效果：
