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>





  • 相关阅读:
    一文说透 Spring 循环依赖问题
    git修改已经push的commit message
    Connection Timeout 和CommandTimeout
    mvc 当中 [ValidateAntiForgeryToken] 的作用及用法
    mvc 当中 [ValidateAntiForgeryToken] 的作用及用法
    asp.net mvc与asp.net core Ajax删除操作delete中带ValidateAntiForgeryToken实例
    VS2017秘钥
    Sql server 2008 R2 配置管理工具服务显示远程过程调用失败:0x800706be
    SQL Server 2008找不到SQL Server配置管理器的问题
    如何为SQL Server2008添加登录账户并配置权限
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4456487.html
Copyright © 2011-2022 走看看