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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。