AngularJS 霸道的过滤器小结


Posted in Javascript onApril 26, 2017

一、为什么使用过滤器?

在实际操作中,我们需要对统一数据源进行多次转换,比如我的货币单位,在不同的国家我们将用不同的符号表示。因此,你可能会想到在控制器中判断国家以显示不同的结果,但是过滤器却可以更好的帮助我们做到同样的效果。

过滤器将数据在被指令处理并显示到视图之前进行转换,而不必修改作用域中原有的数据,这样能够允许同一份数据在应用中的不同部分以不同形式得以展示。

接下来,我们详细讨论有关过滤器的用法

二、过滤单个数据的值

下表展示用于单个数据的内置过滤器

AngularJS 霸道的过滤器小结 

先来看看我们的准备案例,待会我们将在这个案例的基础上来使用内容过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr ng-repeat="p in products">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
})
</script>
</body>
</html>

就是一个表格的形式来展示产品的详细情况的案例

AngularJS 霸道的过滤器小结

1.格式化货币值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 使用currency -->
  <td>{{p.price | currency}}</td>
</tr>

AngularJS 霸道的过滤器小结

2.格式化数字值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 保留小数点后3位 -->
  <td>{{p.price | number : 3}}</td>
</tr>

AngularJS 霸道的过滤器小结

3.格式化日期

// 在控制器中添加
$scope.getExpiryDate = function (days) {
  var now = new Date();
  return now.setDate(now.getDate() + days);
}
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <!-- 在视图中使用-->
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

4.改变字符串大小写

<tr ng-repeat="p in products">
  <!-- 字母大小写 -->
  <td>{{p.name | uppercase}}</td>
  <td>{{p.category | lowercase}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

5.生成JSON

<tr ng-repeat="p in products">
  <!-- 生成JSON数据 -->
  <td>{{p.name | json}}</td>
  <td>{{p.category}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

6.本地化过滤器输出

需要移入本地化JS文件

<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price | currency}}</td>
</tr>

AngularJS 霸道的过滤器小结

三、过滤集合

1.限制项目的数量—limitTo过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      Limit: <select ng-model="limitVal" ng-options="item for item in limitRange"></select>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 只显示limitVal行 -->
          <tr ng-repeat="p in products | limitTo : limitVal">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 显示的条数
  $scope.limitVal = '5';
  // 在限制条数的范围条项
  $scope.limitRange = [];
  for (var i = (0 - $scope.products.length); i <= $scope.products.length; i++) {
    $scope.limitRange.push(i.toString());
  }
})
</script>
</body>
</html>

单击下拉列表,根据提示显示不同的条数,负数表示从后往前取

AngularJS 霸道的过滤器小结

2.选取项—filter过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 自定义过滤 -->
          <tr ng-repeat="p in products | filter : selectItems">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义过滤器
  $scope.selectItems = function (item) {
    // 仅仅保留类别为Fish或者name=='Beer'的行
    return item.category == 'Fish' || item.name == 'Beer';
  }

})
</script>
</body>
</html>

仅仅保留类别为Fish或者name=='Beer'的行

AngularJS 霸道的过滤器小结

3.对项目进行排序—orderBy过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 通过价格按照升序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : 'price'"> -->
          <!-- price前加-表示按照降序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : '-price'"> -->
          <!-- 自定义排序 -->
          <!-- <tr ng-repeat="p in products | orderBy : customOrder"> -->
          <!-- 组合排序,保质期<5的降序排列,其他的按照价格升序排序 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price']">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义函数排序
  $scope.customOrder = function (item) {
    // 保质期<5的不排序,其他的按照价格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }
})
</script>
</body>
</html>

保质期<5的不排序,其他的按照价格升序排序

AngularJS 霸道的过滤器小结 

四、链式过滤器

就是将过滤器串联起来综合使用

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 过滤链条,通过orderBy和limitTo共同作用 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义函数排序
  $scope.customOrder = function (item) {
    // 保质期<5的不排序,其他的按照价格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }

})
</script>
</body>
</html>

先按照自定义customOrder函数以price倒序排列,然后只取得5条数据

<tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">

AngularJS 霸道的过滤器小结

五、自定义过滤器

1.创建格式化数据值的过滤器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>

          <tr ng-repeat="p in products">
            <!-- 使用自定义过滤器 -->
            <td>{{p.name | labelCase}}</td>
            <td>{{p.category | labelCase : true}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
});
</script>
<!-- 引入自定义的过滤器 -->
<script type="text/javascript" src="js/createFilters.js"></script>
</body>
</html>

自定义过滤器,labelCase反转字符串

// js/createFilters.js文件
angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })

AngularJS 霸道的过滤器小结 

2.创建集合过滤器

在createFilter中定义一个skip过滤函数

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })

在视图中使用

<tr ng-repeat="p in products | skip : 2">
  <!-- 使用自定义过滤器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

移除前两项Apples和Bananas,然后显示

AngularJS 霸道的过滤器小结

3.在已有的过滤器上搭建新的过滤器

在createFilter中添加take过滤器返回,将skip和limitTo两个过滤器方法综合起来

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })
  // 在已有过滤器的基础上建立新的过滤器
  // 将上述的skip和limit两个过滤器合并
  .filter("take", function ($filter) {
    return function (data, skipCount, limitCount) {
      // 先跳过数组的前skipCount项
      var skipData = $filter("skip")(data, skipCount);
      // 接着只取limitCount行
      return $filter("limitTo")(skipData, limitCount);
    }
  })

在视图中使用:

<tr ng-repeat="p in products | take : 2 : 5">
<!-- 使用自定义过滤器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

先移除两项,然后值取5条数据

AngularJS 霸道的过滤器小结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jQuery each函数源码分析
May 25 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 #Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 #Javascript
xmlplus组件设计系列之列表(4)
Apr 26 #Javascript
JS实现数组按升序及降序排列的方法
Apr 26 #Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 #Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 #Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 #Javascript
You might like
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python画微信表情符的实例代码
2019/10/09 Python
Python如何发送与接收大型数组
2020/08/07 Python
毕业生精彩的自我评价分享
2013/10/06 职场文书
灰雀教学反思
2014/04/28 职场文书
班风学风建设方案
2014/05/06 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
学籍证明模板
2014/11/21 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript