vue过滤器filter

过滤器实质：

不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理

用在两个地方：

<!-- 在双花括号中-->
{{ message | capitalize }}//capitalize为过滤器名字

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | capitalize "></div>

            多过滤器、多参数：
           {{ message | filterA | filterB }}---多过滤器(message传入 filterA ，filterA 结果传 filterB )

           {{ message | filterA('arg1', arg2) }}---过滤器多参数(参数message，arg1，arg2)

局部过滤器、全局过滤器：

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器

局部过滤器：

filters: {
  capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局过滤器：

Vue.filter('capitalize', function (value) {
       if (!value) return ''
        value = value.toString()
       return value.charAt(0).toUpperCase() + value.slice(1)
})

eg:

例子1：vue计算属性中使用filter

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

例子2：函数中使用filter

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }