zoukankan      html  css  js  c++  java
  • Angular1.0与Vue循环指令的区别

    1、获取ng-repeat和v-for循环生成的节点

    比较:

    • ng-repeat生成的节点不能直接获取
      解决方案:自定义一个指令监听ng-repeat渲染完再执行相应的DOM操作
    • v-for生成的节点可以直接获取

    angular

    <!DOCTYPE html>
    <html ng-app="myModule">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body ng-controller="myController">
        <ul>
          <li ng-repeat="item in arr" repeat-finish="renderFinish()">{{item}}</li>
        </ul>
          <script src="js/angular.js"></script>
          <script>
            var app = angular.module('myModule', ['ng']);
            app.controller('myController', function($scope, $http){
              $scope.name = 'mary';
              $scope.arr = [1, 3, 4, 5];
              console.log(document.querySelectorAll('li').length);  // 0
    
              $scope.renderFinish = function() {
                  console.log('渲染完成之后的操作',document.querySelectorAll('li').length);  // 4
              }
            })
    
            // 自定义一个repeat-finish的指令,监听ng-repeat渲染完成后执行的脚步
            app.directive('repeatFinish', function() {
              return {
                link: function(scope, element, attr) {
                  if (scope.$last == true) {
                    scope.$eval(attr.repeatFinish);
                  }
                }
              }
            })
          </script>
        </body>
    </html>
    

    vue

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        </style>
      </head>
      <body>
        <ul class="box">
            <li v-for="item in arr">{{item}}</li>
        </ul>
    
        <script src="js/vue.js"></script>
        <script>
          var mes = {
            arr: [1, 3, 4, 5]
          }
          new Vue({
            el: '.box', 
            data: mes
          })
          console.log(document.querySelectorAll('li').length);  // 4
        </script>
      </body>
    </html>
    
  • 相关阅读:
    域控软件分发
    win2008 ad域控搭建
    tomcat部署web项目的三种方式
    sql server2008数据库迁移的两种方案
    WinServer2008R2远程桌面长时间保持连接
    Windows2012R2备用域控搭建
    主备 主从 主主模式
    excel中汉字转拼音
    正向代理与反向代理
    18-09-11 软件rpm yum rm卸载 和批量删除
  • 原文地址:https://www.cnblogs.com/Zting00/p/7497645.html
Copyright © 2011-2022 走看看