在 Vue.js 中使用过滤器

过滤器是处理 Vue 中数据渲染的一种有趣方式，但在少数情况下才有用。首先要了解的是，过滤器并非方法、计算属性或侦听器的替代品，因为 **过滤器不会转换数据，只会转换用户看到的结果**。从 Vue 2.0 开始，没有内置过滤器，我们需要自己构建它们。

我们可以局部或全局使用过滤器，但值得一提的是，如果全局声明 Vue 过滤器，它应该出现在 Vue 实例之前。在这两种情况下，我们都会将值作为参数传递。

//global
Vue.filter('filterName', function(value) {
  return // thing to transform
});
 
//locally, like methods or computed
filters: {
  filterName(value) {
    return // thing to transform
  }
}

过滤器使用管道，紧随您希望在渲染时更改的数据。因此，我们会显示要更改的数据，然后是过滤器

{{ data | filter }}

这是一个小例子，带有一个小费计算器

查看 CodePen 上 Sarah Drasner (@sdras) 的 过滤器。

new Vue({
  el: '#app',
  data() {
    return {
      customer1total: 35.43    
    }
  },
  filters: {
    tip15(value) {
      return (value*.15).toFixed(2)
    },
    tip20(value) {
      return (value*.2).toFixed(2)
    },
    tip25(value) {
      return (value*.25).toFixed(2)
    }
  }
});

<div id="app">
  <h2>Tip Calculator</h2>
  <p><strong>Total: {{ customer1total }}</strong></p>
  <p>15%: {{ customer1total | tip15 }}</p>
  <p>20%: {{ customer1total | tip20 }}</p>
  <p>25%: {{ customer1total | tip25 }}</p>
</div>

您也可以在 v-bind 指令中使用过滤器，而不仅仅是使用 mustache 模板。过滤器也可以链接。请记住，如果您要链接过滤器：顺序很重要。第一个过滤器将首先应用，第二个过滤器将应用于第一个完成的过滤器，依此类推。

 {{ data | filterA | filterB }}

我们也可以像这样将附加参数传递给过滤器

{{ data | filterName(arg1, arg2) }}

// locally, like methods or computed
filters: {
  filterName(value, arg1, arg2) {
    return //thing to transform
  }
}

现在，您可能认为，根据名称，过滤器对于表单来说非常棒，因为当我们只想显示某些数据而不显示其他数据时，我们可以使用它们。但是，过滤器需要在每次更新时重新运行，因此，如果您有像输入这样的东西，它会在每次您键入时更新，那么它效率不高。最好使用 **computed** 来处理类似的事情，因为它开销更低。结果将根据其依赖项进行缓存，并且不会在每次更新时重新运行。计算属性只有在这些依赖项发生变化时才会重新计算，但也可以处理复杂逻辑。这使得它们成为根据输入过滤信息的绝佳候选者。但是，在某些情况下，您确实需要根据时间的变化进行更新，对于这些情况，最好使用 **method**。