Avalon2The ms-forbinding has gathered ms-repeat, ms-each, ms-withall the functions of , which is easier to use, and the performance has also been improved a lot.
AvalonThere is no need to use the vueor attribute to improve performance, it's already taken care of internally.reactkey
loop array
ms-forExample looping over an array:
<!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>
Page effect:
ms-forSupport the continued use of the following element nodes ms-forto form double loops and multi-level loops; however, double loops must correspond to two-dimensional arrays, and several-dimensional loops correspond to several-dimensional arrays.
Example:
<!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>
Page effect:
cycle object
ms-forExample loop object:
<!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>
Page effect:
