/vue2-filters

A collection of standard filters Vue 1.* adapted for use in Vue 2.*

Primary LanguageJavaScript

vue2-filters Build Status

The list of standard filters Vue.js 1.* adapted for use in Vue.js 2.*

Installation

Direct include

Simply include vue2-filters after Vue and it will install itself automatically:

<script src="vue.js"></script>
<script src="vue2-filters.min.js"></script>

CDN

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue2-filters/0.1.6/vue2-filters.min.js"></script>

NPM

npm install vue2-filters

When used with a module system, you must explicitly install the filters via Vue.use():

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

You don't need to do this when using global script tags.

Usage

capitalize

  • Example:

    

    • 



{{ msg | capitalize }} // 'abc' => 'Abc'




#### uppercase

+ Example:

  ```js
{{ msg | uppercase }} // 'abc' => 'ABC'



lowercase


    

  • 

    Example:
    

    

    • 



{{ msg | lowercase }} // 'ABC' => 'abc'



#### placeholder

+ Example:

  ```js
{{ msg | placeholder('Text if msg is missing') }} // '' => 'Text if msg is missing'



currency


    

  • 

    Arguments:
    

      

    • {String} [symbol] - default: '$'
      • 

    • {Number} [decimal places] - default: 2
      • 

    

    • 

  • 

    Example:
    

    

    • 



{{ amount | currency }} // 12345 => $12,345.00


Use a different symbol:
  ```js
{{ amount | currency('£') }} // 12345 => £12,345.00



Use a different number decimal places:


{{ amount | currency('₽', 0) }} // 12345 => ₽12,345


pluralize


    

  • 

    Arguments:
    

      

    • {String} single, [double, triple, ...]
      • 

    

    • 

  • 

    Example:
    

    

    • 



{{count}} {{count | pluralize('item')}}


// 1 => '1 item'
// 2 => '2 items'



  ```js
{{date}} {{date | pluralize('st','nd','rd','th')}} 

// 1 => '1st'
// 2 => '2nd'
// 3 => '3rd'
// 4 => '4th'
// 5 => '5th'



limitBy


    

  • 

    Arguments:
    

      

    • {Array} [items]
      • 

    • {Number} [limit]
      • 

    • {Number} [offset]
      • 

    

    • 

  • 

    Example:
    

    

    • 








```

filterBy


    

  • 

    Arguments:
    

      

    • {Array} [items]
      • 

    • {String} [query]
      • 

    • {String} [searchKey]
      • 

    

    • 

  • 

    Example:
    

    

    • 











```

orderBy


    

  • 

    Arguments:
    

      

    • {Array} [items]
      • 

    • {String} [sortKey]
      • 

    • {Number} [order] - default: 1
      • 

    

    • 

  • 

    Example:
    

    Sort users by name:
    

    

    • 



    
  
  • 
    {{ user.name }}
  
    • 


```
  In descending order:
  ```html

    
  
  • 
    {{ user.name }}
  
    • 


```

Contribution


If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.


License


MIT