Vue.js过滤器

过滤器是Vue.js允许我们将格式和转换应用于模板插值中使用的值的方式。

过滤器是Vue组件提供的功能，可让您将格式和转换应用于模板动态数据的任何部分。

它们不更改组件数据或任何内容，而仅影响输出。

假设您正在打印名称：

<template>
  <p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

如果您要检查该怎么办name实际包含一个值，如果不显示，则模板将显示“ Hi there！”？

输入过滤器：

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
filters: {
fallback: function(name) {
return name ? name : ‘there’
}
}
}
</script>

请注意应用过滤器的语法，即| filterName。如果您熟悉Unix，那就是Unix管道运算符，该运算符用于将操作的输出作为输入传递给下一个操作。

这filters组件的属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。

返回的值是Vue.js模板中实际打印的值。

过滤器当然可以访问组件数据和方法。

过滤器的好用例是什么？

转换字符串，例如，大写或将其小写
格式化价格

在上方，您看到了一个简单的过滤器示例：{{ name | fallback }}。

通过重复管道语法，可以链接过滤器：

{{ name | fallback | capitalize }}

这首先适用于fallback过滤，然后capitalize过滤器（我们尚未定义，但请尝试创建一个！）。

高级过滤器还可以使用常规函数参数语法接受参数：

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: ‘House’
}
},
filters: {
prepend: (name, prefix) => {
return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}
}
}
</script>

如果您将参数传递给过滤器，则传递给过滤器功能的第一个参数始终是模板插值（name（在这种情况下），然后是您传递的显式参数。

您可以通过使用逗号分隔多个参数来使用它们。

注意，我使用了箭头功能。我们通常避免在方法和计算属性中使用箭头函数，因为它们几乎总是引用this来访问组件数据，但是在这种情况下，过滤器不需要访问它，而是通过参数接收它需要的所有数据，并且我们可以安全地使用更简单的arrow函数语法。

这个包有很多预制的过滤器供您直接在模板中使用，其中包括capitalize，uppercase，lowercase，placeholder，truncate，currency，pluralize和更多。

免费下载我的Vue手册

Vue.js过滤器

过滤器是Vue.js允许我们将格式和转换应用于模板插值中使用的值的方式。

更多vue教程：