标签:
一、插入移除处理
<div ms-controller="text">
<div ms-if="true">
根据条件显示内容
</div>
</div>
<div avalonctrl="test">
<div>
根据条件显示内容
</div>
</div>
<div ms-controller="text">
<div ms-if="flase">
根据条件显示内容
</div>
</div>
<div avalonctrl="test">
<!--ms-if
--></div>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>avaon-ms-if</title>
<script type="text/javascript" src="../avalon.min.js"></script>
<script type="text/javascript">
avalon.ready(function(){
var vmodel = avalon.define({
$id:‘test‘,
object:{}
});
setTimeout(function(){
vmodel.object = {
id:"123",
message:"显示!!"
}
},3000);
avalon.scan()
});
</script>
</head>
<body>
<div ms-controller="test">
这里是比较输出的结果{{object.id != null}}
<div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div>
<div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>avalon-ms-if-toggle</title>
<style type="text/css">
div div{
width:200px;
height:100px;
}
div.d1{
background:red;
}
div.d2{
background:green;
}
div.d3{
background:blue;
}
</style>
<script type="text/javascript" src="../avalon.min.js"></script>
<script type="text/javascript">
avalon.ready(function(){
var vm = avalon.define({
$id:‘text‘,
show:1,
but:function(index){
vm.show=index;
}
});
avalon.scan();
})
</script>
</head>
<body>
<div ms-controller="text">
<button ms-click="but(1)">红</button>
<button ms-click="but(2)">绿</button>
<button ms-click="but(3)">蓝</button>
<div class="d1" ms-if="show===1"></div>
<div class="d2" ms-if="show===2"></div>
<div class="d3" ms-if="show===3"></div>
</div>
</body>
标签:
原文地址:http://www.cnblogs.com/Zjingwen/p/4456487.html