In this post we’ll be talking about something called filters. Filters provide a way to perform text transformation such as capitalizing letters or doing virtually anything we’d like. Filters can be used both within string interpolation, but also within the v-bind directive’s expression. As always, let’s dive straight into an example.

I have a message data property which I output using string interpolation. Suppose I want to output the message in all uppercase letters. The first thing I want to do, is to introduce a new top-level property on the Vue instance, namely the filters property.

filters: {

}

This property is semantically the same as the methods property, in that it takes filter names as keys and functions as the values. In this case, I want to add a filter named “uppercase,” so I’ll use this as the key. The value is a function, which receives the value to transform as its first argument.

filters: {
  uppercase: function(value) {
    if (!value) {
      return '';
    }
      
    return value.toString().toUpperCase();
  }
}

Using this filter is very simple. Simply add a pipe symbol (|) after the string interpolation expression, followed by the name of the filter. In this example, I will add a pipe followed by the name uppercase.

<h1>{{ message | uppercase }}</h1>

We will now see the message being displayed in uppercase letters. What happens is that the evaluation of the expression before the pipe – message in this case – is passed to the filter as the first argument, and the return value of the filter is then output.

Filters can actually be chained, so we could add another pipe and filter name after the one we have added already. The second filter would then receive the result of the first filter as its first argument. This is useful if you want to apply multiple transformations to your text, and this also allows you to keep filters very specialized, such that they only do one transformation each.

There’s one more thing I’d like to show you. Since filters are just JavaScript functions, we can actually use them as such. This allows us to pass in our own arguments in case we need some more flexibility. Let’s say that we want our filter to take an argument that decides whether or not only the first character should be uppercased instead of the whole string. To do that, we first need to add the parameter to the filter and make a few changes to the code.

filters: {
  uppercase: function(value, onlyFirstCharacter) {
    if (!value) {
      return '';
    }
      
    value = value.toString();
      
    if (onlyFirstCharacter) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    } else {
      return value.toUpperCase();
    }
  }
}

Within the template, we can now use the filter as a normal function invocation and add our argument.

<h1>{{ message | uppercase(true) }}</h1>

Note that our argument is passed as the second argument, as Vue always passes the value to transform as the first argument.

Now we should only see the first character being uppercased. If we change the boolean to false, we should see a message in all uppercased letters.

We can pass any expression as arguments to our filter, be it the name of a data property, a shorthand if statement or a string.

That’s it for filters – that was pretty easy, right? Before ending this lecture, I just want to mention that filters are intended for transforming text, so if you need any complex data transformations, then you are usually better off using a computed property.