本节介绍的ms-if指令与ms-visible很相似，都是让某元素“看不见”，不同的是ms-visible是通过CSS实现，ms-if是通过移除插入节点实现。
ms-if的用法与1.×时别无二致，只要值是真，就插入，为假时，就在原位置上替换为一个注释节点做占位符。
注意1： 在avalon1.*中，存在一个叫ms-if-loop的辅助指令，这个在2.0移除了，这个直接使用filterBy过滤器就能实现相似功能。
注意2： 在avalon1.*中，ms-if的优选级是高于ms-repeat循环指令，到avalon2.0，则反过来，ms-for比较高。
<!DOCTYPE HTML>
<html>
<head>
<title>ms-if</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./dist/avalon.js" ></script>
<script>
var vmodel = avalon.define({
$id: "test",
object: {}
})
setTimeout(function() {
vmodel.object = {id: "132", message: "显示！！"}
}, 3000)
setTimeout(function() {
vmodel.object = {}
}, 5000)
</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>
</html>
现在我们用ms-if重新做一下切换卡吧
<!DOCTYPE html>
<html>
<head>
<title>ms-if</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="./dist/avalon.js"></script>
<script >
var vm = avalon.define({
$id: "test",
curIndex: 0, //默认显示第一个
buttons: ['aaa', 'bbb', 'ccc'],
panels: ["<div>面板1</div>", "<p>面板2</p>", "<strong>面板3</strong>"]
})
</script>
<style>
button{
margin:1em 3em;
}
.panel div{
height:200px;
background: #a9ea00;
}
.panel p{
height:200px;
background: green;
}
.panel strong{
display:block;
100%;
height:200px;
background: #999;
}
</style>
</head>
<body ms-controller="test" >
<div>
<button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button>
</div>
<div class='panel' ms-for='(jj, el) in @panels' ms-if='jj === @curIndex' ms-html='el'></div>
</body>
</html>
