vue——vue2-filters

安装

npm install vue2-filters

在main.js里引入

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

Vue.use(Vue2Filters)

要在组件中使用预定义的方法之一（如limitby、filterby、find或orderby），需要将vue2filters.mixin添加到mixin列表：

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

使用：

1、capitalize

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

2、uppercase

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

3、lowercase

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

4、placeholder

{String} [placeholder]

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

5、truncate

{Number} [length] - default: 15

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

6、currency

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

{Number} [decimalDigits] - default: 2

{Object} [options] - default: {}

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

使用其他符号

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

使用不同的小数位数：

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

使用不同的千位分隔符：

{{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345

使用其他十进制分隔符：

{{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00

使用符号的右键：

{{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$

在amound和symbol之间添加空格：

{{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,34

使用多个选项：

{{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr

7、pluralize

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

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

8、limitBy

{Array} [items]

{Number} [limit]

{Number} [offset]

<!-- 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>

9、filterBy

{Array} [items]

{String} [query]

{String} [searchKey]

<!-- 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')">

10、find

<!-- only the first item that contains the target string "hello" will be displayed -->
<div v-for="item in find(items, 'hello')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object and return the first result -->
<div v-for="user in find(users, 'Bonnie', 'name', 'age')">

11、orderBy

按名称对用户排序

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

按降序排列：

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