npm.io
0.1.2 • Published 9 years ago

vue2-lex-filters

Licence
MIT
Version
0.1.2
Deps
0
Vulns
0
Weekly
0
SummaryDependencyVersions

vue2-lex-filters

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

Installation

Direct include

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

<script src="vue.js"></script>
<script src="vue2-lex-filters.min.js"></script>
CDN
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue2-lex-filters/0.1.9/vue2-lex-filters.min.js"></script>
NPM
npm install vue2-lex-filters

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

import Vue from 'vue'
import LexFilters from 'vue2-lex-filters'

Vue.use(LexFilters)

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

Usage

capitalize

  • Example:

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

  • Example:

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

  • Example:

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

  • Arguments:

    • {String} [placeholder]

  • Example:

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

  • Arguments:

    • {Number} [length] - default: 15

  • Example:

    {{ msg | truncate(10) }} // 'lorem ipsum dolor' => 'lorem ipsu...'
currency

  • Arguments:

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

  • Example:

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

    Use a different symbol:

    {{ 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'
    {{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:

    <!-- only display first 10 items -->
<div v-for="item in limitBy(items, 10)"></div>
<!-- display items 5 to 15 -->
<div v-for="item in limitBy(items, 10, 5)"></div>
filterBy

  • Arguments:

    • {Array} [items]
    • {String} [query]
    • {String} [searchKey]

  • Example:

    <!-- only items that contain the target string "hello" will be displayed -->
<div v-for="item in filterBy(items, 'hello')">
<!-- the filter will only search for "Jack" in the name field of each user object -->
<div v-for="user in filterBy(users, 'Jack', 'name')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
<div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')">
orderBy

  • Arguments:

    • {Array} [items]
    • {String} [sortKey]
    • {Number} [order] - default: 1

  • Example:

    Sort users by name:

    <ul>
  <li v-for="user in orderBy(users, 'name')">
    {{ user.name }}
  </li>
</ul>

    In descending order:

    <ul>
  <li v-for="user in orderBy(users, 'name', -1)">
    {{ user.name }}
  </li>
</ul>

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
  • __INLINE_CODE_5__

  • Example:

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

    Use a different symbol:

    {{ amount | currency('£') }} // 12345 => £12,345.00

    Use a different number decimal places:

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

    • Arguments:

      • __INLINE_CODE_6__

    • Example:

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

// 1 => '1 item'
// 2 => '2 items'
      {{date}} {{date | pluralize('st','nd','rd','th')}} 

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

    • Arguments:

      • __INLINE_CODE_7__
      • __INLINE_CODE_8__
      • __INLINE_CODE_9__

    • Example:

      <!-- only display first 10 items -->
<div v-for="item in limitBy(items, 10)"></div>
<!-- display items 5 to 15 -->
<div v-for="item in limitBy(items, 10, 5)"></div>
    filterBy

    • Arguments:

      • __INLINE_CODE_10__
      • __INLINE_CODE_11__
      • __INLINE_CODE_12__

    • Example:

      <!-- only items that contain the target string "hello" will be displayed -->
<div v-for="item in filterBy(items, 'hello')">
<!-- the filter will only search for "Jack" in the name field of each user object -->
<div v-for="user in filterBy(users, 'Jack', 'name')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
<div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')">
    orderBy

    • Arguments:

      • __INLINE_CODE_13__
      • __INLINE_CODE_14__
      • __INLINE_CODE_15__

    • Example:

      Sort users by name:

      <ul>
  <li v-for="user in orderBy(users, 'name')">
    {{ user.name }}
  </li>
</ul>

      In descending order:

      <ul>
  <li v-for="user in orderBy(users, 'name', -1)">
    {{ user.name }}
  </li>
</ul>

    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

    Keywords

    vuejsvuefiltersvue2-lex-filters