vue.js过滤器_Vue.js过滤器

vue.js过滤器

Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data.

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

They don’t change a component data or anything, but they only affect the output.

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

Say you are printing a name:

假设您正在打印名称：

<template>
  <p>Hi {{ name }}!</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  }
}
</script>

What if you want to check that name is actually containing a value, and if not print ‘there’, so that our template will print “Hi there!”?

如果您要检查name是否确实包含值，并且不打印“ there”，以便我们的模板将打印“ Hi there！”，该怎么办？

Enter filters:

输入过滤器：

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  filters: {
    fallback: function(name) {
      return name ? name : 'there'
    }
  }
}
</script>

Notice the syntax to apply a filter, which is | filterName. If you’re familiar with Unix, that’s the Unix pipe operator, which is used to pass the output of an operation as an input to the next one.

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

The filters property of the component is an object. A single filter is a function that accepts a value and returns another value.

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

The returned value is the one that’s actually printed in the Vue.js template.

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

The filter, of course, has access to the component data and methods.

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

What’s a good use case for filters?

过滤器的好用例是什么？

• transforming a string, for example, capitalizing or making it lowercase
  转换字符串，例如大写或将其小写
• formatting a price
  格式化价格

Above you saw a simple example of a filter: {{ name | fallback }}.

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

Filters can be chained, by repeating the pipe syntax:

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

{{ name | fallback | capitalize }}

This first applies the fallback filter, then the capitalize filter (which we didn’t define, but try making one!).

这首先应用fallback过滤器，然后capitalize过滤器(我们并没有确定，但尝试做一个！)。

Advanced filters can also accept parameters, using the normal function parameters syntax:

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

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'House'
    }
  },
  filters: {
    prepend: (name, prefix) => {
      return `${prefix} ${name}`
    }
  }
}
</script>

If you pass parameters to a filter, the first one passed to the filter function is always the item in the template interpolation (name in this case), followed by the explicit parameters you passed.

如果将参数传递给过滤器，则传递给过滤器函数的第一个参数始终是模板插值中的项(在这种情况下为name )，后跟传递的显式参数。

You can use multiple parameters by separating them using a comma.

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

Notice I used an arrow function. We avoid arrow function in methods and computed properties generally because they almost always reference this to access the component data, but in this case, the filter does not need to access this but receives all the data it needs through the parameters, and we can safely use the simpler arrow function syntax.

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

This package has a lot of pre-made filters for you to use directly in templates, which include capitalize, uppercase, lowercase, placeholder, truncate, currency, pluralize and more.

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

翻译自: https://flaviocopes.com/vue-filters/

vue.js过滤器