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

最新推荐文章于 2022-04-28 18:55:28 发布

baifu2766

最新推荐文章于 2022-04-28 18:55:28 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Zting00/p/7497645.html

版权

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>

转载于:https://www.cnblogs.com/Zting00/p/7497645.html

baifu2766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular1.0与Vue循环指令的区别

1、获取ng-repeat和v-for循环生成的节点比较：ng-repeat生成的节点不能直接获取解决方案：自定义一个指令监听ng-repeat渲染完再执行相应的DOM操作v-for生成的节点可以直接获取angular<!DOCTYPE html><html ng-app="myModule"> <h...
复制链接

扫一扫