avalon视频学习笔记（五）

时间 2019-11-19

标签 avalon 视频学习笔记繁體版

原文原文链接

1、插入移除处理

一、绑定属性ms-if

a、当ms-if的值为真（true）时，就将元素输出到页面里面。

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<div ms-controller="text"> <div ms-if="true"> 根据条件显示内容 </div></div>

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<div avalonctrl="test"> <div> 根据条件显示内容 </div></div>

b、若是当ms-if 的值为假（flase）时，就将元素移除dom树

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<div ms-controller="text"> <div ms-if="flase"> 根据条件显示内容 </div></div>

    
    
    
    
     
     
     
     
     
     
     
     -->
     
     
     
     
    
    
    
    
<div avalonctrl="test"> <!--ms-if</div>

avalonctrl是为avalon垃圾回收器查找元素所用

是为了将注释的节点从新，装填会dom树所准备的

二、ms-if和ms-visible的区别

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
 <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>

*打开代码调试工具，能够发现

ms-if是不占用dom节点的，是经过插入删除来控制节点。

ms-visible是占用dom节点的，是经过display：none和display：block，在dom节点中添加动态样式来控制节点的。

ms-if比ms-visible更高效

三、用ms-if来制做toggle选项卡

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
 <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>

来自为知笔记(Wiz)