{"id":13564025,"url":"https://github.com/freearhey/vue2-filters","last_synced_at":"2025-05-14T20:08:17.893Z","repository":{"id":41394728,"uuid":"73967441","full_name":"freearhey/vue2-filters","owner":"freearhey","description":"A collection of Vue.js filters","archived":false,"fork":false,"pushed_at":"2024-08-28T04:04:31.000Z","size":251,"stargazers_count":926,"open_issues_count":2,"forks_count":115,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-10-30T00:36:06.829Z","etag":null,"topics":["filters","vue","vue2-filters"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freearhey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/arhey","https://www.buymeacoffee.com/arhey"]}},"created_at":"2016-11-16T22:34:20.000Z","updated_at":"2024-09-16T10:54:58.000Z","dependencies_parsed_at":"2024-11-14T18:00:14.830Z","dependency_job_id":null,"html_url":"https://github.com/freearhey/vue2-filters","commit_stats":{"total_commits":187,"total_committers":20,"mean_commits":9.35,"dds":"0.19786096256684493","last_synced_commit":"efa3cdc113261a275341f73c3047cf7c32bbc5f7"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freearhey%2Fvue2-filters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freearhey%2Fvue2-filters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freearhey%2Fvue2-filters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freearhey%2Fvue2-filters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freearhey","download_url":"https://codeload.github.com/freearhey/vue2-filters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248351557,"owners_count":21089304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filters","vue","vue2-filters"],"created_at":"2024-08-01T13:01:25.665Z","updated_at":"2025-04-11T06:18:41.246Z","avatar_url":"https://github.com/freearhey.png","language":"JavaScript","funding_links":["https://www.paypal.me/arhey","https://www.buymeacoffee.com/arhey"],"categories":["JavaScript","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","过滤器","UI Utilities","Filters"],"readme":"# vue2-filters [![Build Status](https://app.travis-ci.com/freearhey/vue2-filters.svg?branch=master)](https://app.travis-ci.com/freearhey/vue2-filters)\n\nA collection Vue.js filters.\n\n## Installation\n\n### Direct include\n\nSimply include `vue2-filters` after Vue and it will install itself automatically:\n\n```html\n\u003cscript src=\"vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vue2-filters.min.js\"\u003e\u003c/script\u003e\n```\n\nTo use one of the predefined methods (such as `limitBy`, `filterBy`, `find`, or `orderBy`) in your component, you also need to add `Vue2Filters.mixin` to mixin list:\n\n```html\n\u003cscript\u003e\n  new Vue({\n    ...\n    mixins: [Vue2Filters.mixin],\n    ...\n  })\n\u003c/script\u003e\n```\n\n### CDN [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/vue2-filters/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue2-filters)\n\n```html\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js\"\u003e\u003c/script\u003e\n```\n\nTo use one of the predefined methods (such as `limitBy`, `filterBy`, `find`, or `orderBy`) in your component, you also need to add `Vue2Filters.mixin` to mixin list:\n\n```html\n\u003cscript\u003e\n  new Vue({\n    ...\n    mixins: [Vue2Filters.mixin],\n    ...\n  })\n\u003c/script\u003e\n```\n\n### NPM [![npm](https://img.shields.io/npm/dm/vue2-filters.svg)](https://www.npmjs.com/package/vue2-filters)\n\n```\nnpm install vue2-filters\n```\n\nWhen used with a module system, you must explicitly install the filters via `Vue.use()`:\n\n```js\nimport Vue from 'vue'\nimport Vue2Filters from 'vue2-filters'\n\nVue.use(Vue2Filters)\n```\n\nYou don't need to do this when using global script tags.\n\nTo use one of the predefined methods (such as `limitBy`, `filterBy`, `find`, or `orderBy`) in your component, you also need to add `Vue2Filters.mixin` to mixin list:\n\n```js\nimport Vue2Filters from 'vue2-filters'\n\nexport default {\n  ...\n  mixins: [Vue2Filters.mixin],\n  ...\n}\n```\n\n### Nuxt.js\n\n```\nnpm install vue2-filters\n```\n\nWhen create file `plugins/vue2-filters.js`:\n\n```js\nimport Vue from 'vue'\nimport Vue2Filters from 'vue2-filters'\n\nVue.use(Vue2Filters)\n```\n\nThen, add the file inside the `plugins` key of `nuxt.config.js`:\n\n```js\nmodule.exports = {\n  //...\n  plugins: [\n    '~/plugins/vue2-filters'\n  ],\n  //...\n}\n```\n\nTo use one of the predefined methods (such as `limitBy`, `filterBy`, `find`, or `orderBy`) in your component, you also need to add `Vue2Filters.mixin` to mixin list:\n\n```js\nimport Vue2Filters from 'vue2-filters'\n\nexport default {\n  ...\n  mixins: [Vue2Filters.mixin],\n  ...\n}\n```\n\n## Available Filters\n\n- [capitalize](#capitalize)\n- [uppercase](#uppercase)\n- [lowercase](#lowercase)\n- [placeholder](#placeholder)\n- [truncate](#truncate)\n- [repeat](#repeat)\n- [reverse](#reverse)\n- [wrap](#wrap)\n- [number](#number)\n- [bytes](#bytes)\n- [percent](#percent)\n- [currency](#currency)\n- [pluralize](#pluralize)\n- [ordinal](#ordinal)\n- [limitBy](#limitBy)\n- [filterBy](#filterBy)\n- [find](#find)\n- [orderBy](#orderBy)\n\n## Usage\n\n#### capitalize\n\n+ Arguments:\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{Boolean} [onlyFirstLetter] - default: false`\n\n+ Example:\n\n  ```js\n  {{ msg | capitalize }} // 'abc' =\u003e 'Abc'\n  ```\n  Capitalize only first letter of sentence:\n\n  ```js\n  {{ msg | capitalize({ onlyFirstLetter: true }) }} // 'lorem ipsum dolor' =\u003e 'Lorem ipsum dolor'\n  ```\n\n\n#### uppercase\n\n+ Example:\n\n  ```js\n  {{ msg | uppercase }} // 'abc' =\u003e 'ABC'\n  ```\n\n#### lowercase\n\n+ Example:\n\n  ```js\n  {{ msg | lowercase }} // 'ABC' =\u003e 'abc'\n  ```\n\n#### placeholder\n\n+ Arguments:\n  * `{String} [placeholder]`\n\n+ Example:\n\n  ```js\n  {{ msg | placeholder('Text if msg is missing') }} // '' =\u003e 'Text if msg is missing'\n  ```\n\n#### truncate\n\n+ Arguments:\n  * `{Number} [length] - default: 15`\n\n+ Example:\n\n  ```js\n  {{ msg | truncate(10) }} // 'lorem ipsum dolor' =\u003e 'lorem ipsu...'\n  ```\n\n#### repeat\n\n+ Arguments:\n  * `{Number} [amount] - default: 1`\n\n+ Example:\n\n  ```js\n  {{ msg | repeat(3) }} // 'a' =\u003e 'aaa'\n  ```\n\n#### reverse\n\n+ Example:\n\n  ```js\n  {{ msg | reverse }} // 'abc' =\u003e 'cba'\n  ```\n\n#### wrap\n\n+ Arguments:\n  * `{String} [string]`\n\n+ Example:\n\n  ```js\n  {{ msg | wrap('###') }} // 'ipsum' =\u003e '###ipsum###'\n  ```\n\n#### number\n\n+ Arguments:\n  * `{String} [format] - default: ''`\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{String} [thousandsSeparator] - default: ','`\n  * `{String} [decimalSeparator] - default: '.'`\n\n+ Examples:\n\n  ```js\n  {{ 123456 | number('0,0') }} // =\u003e 123,456\n  ```\n\n  Change the number of digits after the decimal point:\n\n  ```js\n  {{ 12345.67 | number('0.0000') }} // =\u003e 12345.6700\n  ```\n\n  Add a plus or minus sign to the beginning:\n\n  ```js\n  {{ 123456 | number('+0') }} // =\u003e +123456\n  {{ 123456 | number('-0') }} // =\u003e -123456\n  ```\n\n  Show number in thousand (K) or in millions (M):\n\n  ```js\n  {{ 123456 | number('0a') }} // =\u003e 123K\n  {{ 123456 | number('0 a') }} // =\u003e 123 K\n  {{ 123456789 | number('0a') }} // =\u003e 123M\n  ```\n\n  Use a different thousands separator:\n\n  ```js\n  {{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }} // =\u003e 1 234 567\n  ```\n  Use a different decimal separator:\n\n  ```js\n  {{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }} // =\u003e 12,345|67\n  ```\n\n#### bytes\n\n+ Arguments:\n  * `{Number} [decimalDigits] - default: 2`\n\n+ Examples:\n\n  ```js\n  {{ 1 | bytes }}              // =\u003e 1 byte\n  {{ 20 | bytes }}             // =\u003e 20 bytes\n  {{ 2000 | bytes }}           // =\u003e 1.95 kB\n  {{ 2000000 | bytes }}        // =\u003e 1.91 MB\n  {{ 2000000000 | bytes }}     // =\u003e 1.86 GB\n  {{ 2000000000000 | bytes }}  // =\u003e 1.82 TB\n  ```\n\n  Change the number of digits after the decimal point:\n\n  ```js\n  {{ 2000000000 | bytes(4) }}  // =\u003e 1.8626 GB\n  ```\n\n#### percent\n\n+ Arguments:\n  * `{Number} [decimalDigits] - default: 0`\n  * `{Number} [multiplier] - default: 100`\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{String} [decimalSeparator] - default: '.'`\n\n+ Examples:\n\n  ```js\n  {{ 0.01 | percent }} // =\u003e 1%\n  {{ 0.1 | percent }} // =\u003e 10%\n  {{ 1 | percent }} // =\u003e 100%\n  {{ 100 | percent }} // =\u003e 10000%\n  {{ 0.97 | percent }} // =\u003e 97%\n  ```\n\n  Change the number of digits after the decimal point:\n\n  ```js\n  {{ 0.974878234 | percent(3) }} // =\u003e 97.488%\n  ```\n\n  Change the multiplier:\n\n  ```js\n  {{ 0.974878234 | percent(3, 150) }} // =\u003e 146.232%\n  ```\n\n  Use a different decimal separator:\n\n  ```js\n  {{ 0.07 | percent(2, 100, { decimalSeparator: '|' }) }} // =\u003e 7|00%\n  ```\n\n#### currency\n\n+ Arguments:\n  * `{String} [symbol] - default: '$'`\n  * `{Number} [decimalDigits] - default: 2`\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{String} [thousandsSeparator] - default: ','`\n  * `{String} [decimalSeparator] - default: '.'`\n  * `{Boolean} [symbolOnLeft] - default: true`\n  * `{Boolean} [spaceBetweenAmountAndSymbol] - default: false`\n  * `{Boolean} [showPlusSign] - default: false`\n\n+ Example:\n\n  ```js\n  {{ amount | currency }} // 12345 =\u003e $12,345.00\n  ```\n  Use a different symbol:\n\n  ```js\n  {{ amount | currency('£') }} // 12345 =\u003e £12,345.00\n  ```\n  Use a different number decimal places:\n\n  ```js\n  {{ amount | currency('₽', 0) }} // 12345 =\u003e ₽12,345\n  ```\n  Use a different thousands separator:\n\n  ```js\n  {{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 =\u003e $12.345\n  ```\n  Use a different decimal separator:\n\n  ```js\n  {{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 =\u003e $12,345,00\n  ```\n  Use symbol on right:\n\n  ```js\n  {{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 =\u003e 12,345$\n  ```\n  Add space between amount and symbol:\n\n  ```js\n  {{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 =\u003e $ 12,345\n  ```\n\n  Show the plus sign if the value is greater than zero:\n\n  ```js\n  {{ amount | currency('$', 0, { showPlusSign: true }) }} // 12345 =\u003e +$12,345\n  ```\n  Use multiple options:\n\n  ```js\n  {{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 =\u003e 12,345.00 kr\n  ```\n\n#### pluralize\n\n+ Arguments:\n  * `{String|Array} single or Array(single, double, triple, ...)`\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{Boolean} [includeNumber] - default: false`\n\n+ Example:\n\n  ```js\n  {{ count }} {{ count | pluralize('item') }} \n\n  // 1 =\u003e '1 item'\n  // 2 =\u003e '2 items'\n  ```\n\n  Use an array of words:\n\n  ```js\n  {{ count }} {{ count | pluralize(['fry', 'fries']) }} \n\n  // 1 =\u003e '1 fry'\n  // 2 =\u003e '2 fries'\n  // 3 =\u003e '3 fries'\n  ```\n\n  Include number to output:\n\n  ```js\n  {{ count | pluralize('test', { includeNumber: true }) }} \n\n  // 1 =\u003e '1 test'\n  // 2 =\u003e '2 tests'\n  ```\n\n#### ordinal\n\n+ Arguments:\n  * `{Object} [options] - default: {}`\n\n+ Options:\n  * `{Boolean} [includeNumber] - default: false`\n\n+ Example:\n\n  ```js\n  {{ date | ordinal }} \n\n  // 1 =\u003e 'st'\n  // 2 =\u003e 'nd'\n  // 3 =\u003e 'rd'\n  // 4 =\u003e 'th'\n  // 5 =\u003e 'th'\n  ```\n\n  Include number to output:\n\n  ```js\n  {{ date | ordinal({ includeNumber: true }) }} \n\n  // 1 =\u003e '1st'\n  // 2 =\u003e '2nd'\n  ```\n\n#### limitBy\n\n+ Arguments:\n  * `{Number|Array} [items]`\n  * `{Number} [limit]`\n  * `{Number} [offset]`\n\n+ Example:\n\n  ```html\n  \u003c!-- only display first 10 items --\u003e\n  \u003cdiv v-for=\"item in limitBy(items, 10)\"\u003e{{ item }}\u003c/div\u003e\n  \u003c!-- display items 5 to 15 --\u003e\n  \u003cdiv v-for=\"item in limitBy(items, 10, 5)\"\u003e{{ item }}\u003c/div\u003e\n  \u003c!-- with a Range --\u003e\n  \u003cdiv v-for=\"n in limitBy(10, 4, 2)\"\u003e{{ n }}\u003c/div\u003e\n  ```\n\n#### filterBy\n\n+ Arguments:\n  * `{Array} [items]`\n  * `{String} [query]`\n  * `{String} [searchKey]`\n\n+ Example:\n\n  ```html\n  \u003c!-- only items that contain the target string \"hello\" will be displayed --\u003e\n  \u003cdiv v-for=\"item in filterBy(items, 'hello')\"\u003e\n  \u003c!-- the filter will only search for \"Jack\" in the name field of each user object --\u003e\n  \u003cdiv v-for=\"user in filterBy(users, 'Jack', 'name')\"\u003e\n  \u003c!-- the filter will only search for \"Bonnie\" in the name or age fields of each user object --\u003e\n  \u003cdiv v-for=\"user in filterBy(users, 'Bonnie', 'name', 'age')\"\u003e\n  \u003c!-- filter using a custom function --\u003e\n  \u003cdiv v-for=\"user in filterBy(users, user =\u003e user.age \u003e 16 \u0026\u0026 user.age \u003c 60)\"\u003e\n  ```\n\n#### find\n\n+ Arguments:\n  * `{Array} [items]`\n  * `{String} [query]`\n  * `{String} [searchKey]`\n\n+ Example:\n\n  ```html\n  \u003c!-- only the first item that contains the target string \"hello\" will be displayed --\u003e\n  \u003cdiv v-for=\"item in find(items, 'hello')\"\u003e\n  \u003c!-- the filter will only search for \"Bonnie\" in the name or age fields of each user object and return the first result --\u003e\n  \u003cdiv v-for=\"user in find(users, 'Bonnie', 'name', 'age')\"\u003e\n  ```\n\n#### orderBy\n\n+ Arguments:\n  * `{Array} [items]`\n  * `{String} [sortKey]`\n  * `{Number} [order] - default: 1`\n\n+ Example:\n\n  Sort users by name:\n\n  ```html\n  \u003cul\u003e\n    \u003cli v-for=\"user in orderBy(users, 'name')\"\u003e\n      {{ user.name }}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n  In descending order:\n\n  ```html\n  \u003cul\u003e\n    \u003cli v-for=\"user in orderBy(users, 'name', -1)\"\u003e\n      {{ user.name }}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n  Sort primitive values:\n\n  ```html\n  \u003cul\u003e\n    \u003cli v-for=\"name in orderBy(names, true)\"\u003e\n      {{ name }}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n## Global Configuration\n\nIf you need to override filter options globally you can do so by passing an object into `Vue.use()` function as the second argument:\n\n```js\nimport Vue from 'vue'\nimport Vue2Filters from 'vue2-filters'\n\nvar Vue2FiltersConfig = {\n  capitalize: {\n    onlyFirstLetter: false\n  },\n  number: {\n    format: '0',\n    thousandsSeparator: ',',\n    decimalSeparator: '.'\n  },\n  bytes: {\n    decimalDigits: 2\n  },\n  percent: {\n    decimalDigits: 2,\n    multiplier: 100,\n    decimalSeparator: '.'\n  },\n  currency: {\n    symbol: '$',\n    decimalDigits: 2,\n    thousandsSeparator: ',',\n    decimalSeparator: '.',\n    symbolOnLeft: true,\n    spaceBetweenAmountAndSymbol: false,\n    showPlusSign: false\n  },\n  pluralize: {\n    includeNumber: false\n  },\n  ordinal: {\n    includeNumber: false\n  }\n}\n\nVue.use(Vue2Filters, Vue2FiltersConfig)\n```\n\n## Programmatic Usage\n\nAside from using filters inside templates you can do this programmatically using default filters object:\n\n```js\nthis.$options.filters.filterName(value)\n```\n\nFor example, here's how you can use the `currency`filter:\n\n```js\nthis.$options.filters.currency(100) // =\u003e $100.00\n```\n\nAs for such filters as `limitBy`, `filterBy`, `find`, or `orderBy`, they can be used as usual methods:\n\n```js\nthis.limitBy([1,2,3,4,5], 2) // =\u003e [1,2]\n```\n\n## Upgrade Guide\n\n### Upgrade to 0.6.0 from 0.5.*\n\n#### The `pluralize` filter\n\nThe `pluralize` filter arguments order has been changed. In the new version to specify several variants of words you can do this by passing an array as first argument, like so:\n\n```js\n{{ count | pluralize(['item', 'items']) }}\n````\n\nIn addition, the function of translate a regular number to its ordinal representation was removed from the `pluralize` filter. Now there is a separate `ordinal` filter for this:\n\n```js\n{{ count | ordinal }}\n```\n\n### Upgrade to 0.5.0 from 0.4.*\n\n#### The `capitalize` filter\n\nTo match the definition of the word \"capitalize\", the default filter behavior has been changed. The filter now capitalizes the first letter in each word in the sentence (like CSS property `text-transform`). \n\nIf you want capitalize only first letter of sentence, you just need to add the `onlyFirstLetter` parameter to the filter, like so:\n\n```js\n{{ msg | capitalize({ onlyFirstLetter: true }) }}\n```\n\n### Upgrade to 0.4.0 from 0.3.*\n\nIn the new version it was decided to refuse from global registration of mixins, as it could lead to errors when using this package with other packages. Therefore, you need to manually add `Vue2Filters.mixin` into the mixin list of your components if you use at least one of the predefined methods (such as `limitBy`, `filterBy`, `find` or `orderBy`):\n\n```js\nexport default {\n  ...\n  mixins: [Vue2Filters.mixin],\n  ...\n}\n```\n\nYou can read more about the reasons for this change [here](https://github.com/freearhey/vue2-filters/issues/52)\n\n## Contribution\n\nIf you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/freearhey/vue2-filters/issues) or a [pull request](https://github.com/freearhey/vue2-filters/pulls).\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreearhey%2Fvue2-filters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreearhey%2Fvue2-filters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreearhey%2Fvue2-filters/lists"}