zoukankan      html  css  js  c++  java
  • avalon视频学习笔记(五)

    一、插入移除处理
        1、绑定属性ms-if
            a、当ms-if的值为真(true)时,就将元素输出到页面里面。
    1. <div ms-controller="text">
    2. <div ms-if="true">
    3. 根据条件显示内容
    4. </div>
    5. </div>
    1. <div avalonctrl="test">
    2. <div>
    3. 根据条件显示内容
    4. </div>
    5. </div>
            b、如果当ms-if 的值为假(flase)时,就将元素移除dom树
    1. <div ms-controller="text">
    2. <div ms-if="flase">
    3. 根据条件显示内容
    4. </div>
    5. </div>
    1. <div avalonctrl="test">
    2. <!--ms-if-->
    3. </div>
            avalonctrl是为avalon垃圾回收器查找元素所用
        <!--ms-if-->是为了将注释的节点重新,装填会dom树所准备的
      2、ms-if和ms-visible的区别
    1. <head>
    2. <meta charset="UTF-8">
    3. <meta name="Generator" content="EditPlus®">
    4. <meta name="Author" content="">
    5. <meta name="Keywords" content="">
    6. <meta name="Description" content="">
    7. <title>avaon-ms-if</title>
    8. <script type="text/javascript" src="../avalon.min.js"></script>
    9. <script type="text/javascript">
    10. avalon.ready(function(){
    11. var vmodel = avalon.define({
    12. $id:'test',
    13. object:{}
    14. });
    15. setTimeout(function(){
    16. vmodel.object = {
    17. id:"123",
    18. message:"显示!!"
    19. }
    20. },3000);
    21. avalon.scan()
    22. });
    23. </script>
    24. </head>
    25. <body>
    26. <div ms-controller="test">
    27. 这里是比较输出的结果{{object.id != null}}
    28. <div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div>
    29. <div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div>
    30. </div>
    31. </body>
    *打开代码调试工具,可以发现
        ms-if是不占用dom节点的,是通过插入删除来控制节点。
        ms-visible是占用dom节点的,是通过display:none和display:block,在dom节点中添加动态样式来控制节点的。
        ms-if比ms-visible更高效
        3、用ms-if来制作toggle选项卡
    1. <head>
    2. <meta charset="UTF-8">
    3. <meta name="Generator" content="EditPlus®">
    4. <meta name="Author" content="">
    5. <meta name="Keywords" content="">
    6. <meta name="Description" content="">
    7. <title>avalon-ms-if-toggle</title>
    8. <style type="text/css">
    9. div div{
    10. width:200px;
    11. height:100px;
    12. }
    13. div.d1{
    14. background:red;
    15. }
    16. div.d2{
    17. background:green;
    18. }
    19. div.d3{
    20. background:blue;
    21. }
    22. </style>
    23. <script type="text/javascript" src="../avalon.min.js"></script>
    24. <script type="text/javascript">
    25. avalon.ready(function(){
    26. var vm = avalon.define({
    27. $id:'text',
    28. show:1,
    29. but:function(index){
    30. vm.show=index;
    31. }
    32. });
    33. avalon.scan();
    34. })
    35. </script>
    36. </head>
    37. <body>
    38. <div ms-controller="text">
    39. <button ms-click="but(1)"></button>
    40. <button ms-click="but(2)">绿</button>
    41. <button ms-click="but(3)"></button>
    42. <div class="d1" ms-if="show===1"></div>
    43. <div class="d2" ms-if="show===2"></div>
    44. <div class="d3" ms-if="show===3"></div>
    45. </div>
    46. </body>





  • 相关阅读:
    java(样品集成框架spring、spring mvc、spring data jpa、hibernate)
    设定十分钟android在状态栏上集成的开源project推荐
    分析javascript关闭
    排列-条件求和(Code)
    Leetcode: Remove Duplicates from Sorted Array
    怎样将baidu地图中的baidu logo 去掉
    Android自适应不同屏幕几种方法
    浏览器兼容性问题解决方式
    XMPP入门
    “聊天剽窃手”--ptrace进程注入型病毒
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4456487.html
Copyright © 2011-2022 走看看