Vue 2.x 默认没有过滤器怎么办?

不要怕，面包总会有的，过滤器更会有的

vue不管了，有人管，强大的程序员世界总有需要的，今天推荐的是vue2-filters

1. 这个玩意可以单独使用，也可以npm引入使用
2. 它提供了一些常用的功能（不过也仅限于此了），报错字符串、数字、金钱，甚至可以对数组进行处理，比如说什么筛选、排序、limit（不知道叫啥，会sql的应该知道这个），还算是可以吧
3. 可以使用mixins混入方式引用
4. 好像不可以单独调用（可能是我不会），不过可以把里面的文件拷贝出来引用
5. 贴一些官方数据

安装

直接引用

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

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

To 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:

<script>
  new Vue({
    ...
    mixins: [Vue2Filters.mixin],
    ...
  })
</script>

CDN

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

To 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:

<script>
  new Vue({
    ...
    mixins: [Vue2Filters.mixin],
    ...
  })
</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.

To 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:

import Vue2Filters from 'vue2-filters'

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

Nuxt.js

npm install vue2-filters

When create file plugins/vue2-filters.js:

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

Vue.use(Vue2Filters)

Then, add the file inside the plugins key of nuxt.config.js:

module.exports = {
  //...
  plugins: [
    '~/plugins/vue2-filters'
  ],
  //...
}

To 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:

import Vue2Filters from 'vue2-filters'

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

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} [decimalDigits] - default: 2
  • {Object} [options] - default: {}

• Options:

  • {String} [thousandsSeparator] - default: ','
  • {String} [decimalSeparator] - default: '.'
  • {Boolean} [symbolOnLeft] - default: true
  • {Boolean} [spaceBetweenAmountAndSymbol] - default: false

• 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
  

  Use a different thousands separator:

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

  Use a different decimal separator:

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

  Use symbol on right:

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

  Add space between amound and symbol:

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

  Use multiple options:

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

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

find

• Arguments:

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

• Example:

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

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>