Vue中的系统过滤器

  Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器，Vue也提供了一个接口用来提供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。

• 注意：系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了

capitalize

• 作用：将字符串的首写变成大写

• 例如：

  {{ msg | capitalize }}

  ‘abc’ => ‘Abc’

uppercase

• 示例：

  {{ msg | uppercase }}

  ‘abc’ => ‘ABC’

lowercase

• 示例

  {{ msg | lowercase }}

  ‘ABC’ => ‘abc’

currency

• 参数

  • {String}[货币符号]-默认值：‘$’
  • 1.0.22+{Number}[小数位]-默认值：2

• 示例：

  {{ amount | currency }}

  2345 => $12,345.00

  使用其它符号：

{{ amount | currency '£' }}

12345 => £12,345.00

  一些货币使用3或4位小数，而一些货币不会，例如日元（¥)）、越南盾（₫）：

{{ amount | currency '₫' 0 }}

12345 => ₫12,345

pluralize

• 参数：{String} single, [double, triple, ...]
• 用法：

  如果只有一个参数，复数形式只是简单地在末尾添加一个“s”。如果有多个参数，参数被当做一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

示例：

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

json

• 参数：{Number} [indent] - 默认: 2
• 用法：

  输出经JSON.stringify()处理后的结果，而不是输出toString()的结果（如 [object Object]）。

• 示例：

  以四个空格的缩进打印一个对象：

<pre>{{ nestedObject | json 4 }}</pre>

debounce

• 限制：指令的值需是函数，如v-on
• 参数：{Number} [wait] - default: 300
• 用法：

  包装处理器，让它延迟执行xms，默认延迟300ms。包装后的处理器在调用之后至少将延迟xms，如果在延迟结束前再次调用，延迟时长重置为xms。

• 例如：

  <input @keyup=“onKeyup | debounce 500”>

limitBy

• 限制：指令的值需是数组，如v-for

• 参数：

  • {Number} limit
  • {Number} [offset]

• 用法：

  限制数组为开始N个元素，N由第一个参数指定。第二个参数是可选的，指定开始的偏移量。

<!-- 只显示开始10个元素 -->
<div v-for="item in items | limitBy 10"></div>
<!-- 显示第5-15元素 -->
<div v-for="item in items | limitBy 10 5"></div>

filterBy

• 限制：指令的值需是数组，如v-for

• 参数：

  • {String | Function} targetStringOrFunction
  • "in" (optional delimiter)
  • {String} [...searchKeys]

• 用法：

  返回过滤后的数组。第一个参数可以是字符串或函数。如果第一个参数是字符串，则在每个数组元素中搜索它：

<div v-for="item in items | filterBy 'hello'">

  在上例中，只显示包含字符串hello的元素。如果item是一个对象，过滤器将递归地在它所有属性中搜索。为了缩小搜索范围，可以指定一个搜索字段：

<div v-for="user in users | filterBy 'Jack' in 'name'">

  在上例中，过滤对象只在用户对象的name属性中搜索Jack。为了更好的性能，最好始终限制搜索范围。

  上例中使用静态参数，当然可以使用动态参数作为搜索目标或搜索字段。配合v-model我们可以轻松实现输入提示效果：

<div id="filter-by-example">
  <input v-model="name">
  <ul>
    <li v-for="user in users | filterBy name in 'name'">
      {{ user.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '#filter-by-example',
  data: {
    name: '',
    users: [
      { name: 'Bruce' },
      { name: 'Chuck' },
      { name: 'Jackie' }
    ]
  }
})

• 其它示例：

  多键值搜索：

<li v-for="user in users | filterBy searchText in 'name' 'phone'"></li>

  使用一个动态数组进行多键值搜索：

<!-- fields = ['fieldA', 'fieldB'] -->
<div v-for="user in users | filterBy searchText in fields">

  使用一个用户自定义的过滤器函数：

<div v-for="user in users | filterBy myCustomFilterFunction">

orderBy

• 限制：指令的值需是数组，如v-for

• 参数：

  • {String | Array<String> | Function} ...sortKeys
  • {String} [order] - 默认值: 1

• 用法：

  返回排序后的数组。你可以传入多个键名。也可以传入一个数组，此数组包含排序的键名。如果你想使用自己的排序策略，可以传入一个函数。可选参数order决定结果升序（order >= 0）或降序（order < 0）。

  对于原始类型数组，可以忽略sortKey，只提供排序，例如orderBy 1。

• 示例：

  按名字排序用户：

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

  降序：

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

  原始值排序：

<ul>
  <li v-for="n in numbers | orderBy true">
    {{ n }}
  </li>
</ul>

  动态排序：

<div id="orderby-example">
  <button @click="order = order * -1">Reverse Sort Order</button>
  <ul>
    <li v-for="user in users | orderBy 'name' order">
      {{ user.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '#orderby-example',
  data: {
    order: 1,
    users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
  }
})

  使用两个键排序：

<ul>
  <li v-for="user in users | orderBy 'lastName' 'firstName'">
    {{ user.lastName }} {{ user.firstName }}
  </li>
</ul>

  使用函数排序：

<div id="orderby-compare-example" class="demo">
  <button @click="order = order * -1">Reverse Sort Order</button>
  <ul>
    <li v-for="user in users | orderBy ageByTen order">
      {{ user.name }} - {{ user.age }}
    </li>
  </ul>
</div>

new Vue({
  el: '#orderby-compare-example',
  data: {
    order: 1,
    users: [
      {
        name: 'Jackie',
        age: 62
      },
      {
        name: 'Chuck',
        age: 76
      },
      {
        name: 'Bruce',
        age: 61
      }
    ]
  },
  methods: {
    ageByTen: function (a, b) {
      return Math.floor(a.age / 10) - Math.floor(b.age / 10)
    }
  }
})

举例

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        原始数组对象：<br>
        {{list}}<br>
        <hr>
        转换成json后的字符串数组:<br>
        {{list | json}}<br>
        <hr>
        将其转换成大写:<br>
        {{list | json | uppercase}}<br>
        <hr>
        搜索其中的“Hello”字符串:<br>
        <li v-for="item in list | filterBy 'Hello' ">{{item.hello}}</li>
    </div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el:'#app'
        ,data:{
            list:[
                {hello:'Hello'}
                ,{world:'World'}
            ]
        }
    });
</script>
</html>

结果

  由于系统过滤器的用法我在上面的文档中已经写得很清楚了，所以说这里就不用再进行分析了。