Angular1.0与Vue循环指令的区别

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

以上是 Angular1.0与Vue循环指令的区别 的全部内容， 来源链接： utcz.com/z/377082.html

回到顶部