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函数语法。

这个包有很多预制的过滤器供您直接在模板中使用,其中包括capitalizeuppercaselowercaseplaceholdertruncatecurrencypluralize和更多。

免费下载我的Vue手册


更多vue教程: