What you need to know about filters in Vue

Preface

Hello everyone, today I will share some tips on filters in Vue.

What is a filter

Vue.js allows you to define your own filters, which can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported since 2.1.0+).

How to use filters

Global Filters

1. This case is to filter out ￥ and 元 in the price
2. Example￥1999.00
3. Define a capitalize method and pass in the value
4. If value is empty, returns an empty string
5. Otherwise, the string "￥" "元" is added, where toFixed(2) is rounded to the specified number of decimal places.

How to use

//main.js
Vue.filter("capitalize", function (value) {
  if (!value) return "";
  return "￥" + value.toFixed(2) + "元";
});

Use within double curly braces

<!-- home.vue -->
      <h1>Vue Filters</h1>
      <p>{{ price | capitalize }}</p>
      {{ 20.6664376486 | capitalize }}

Use in v-bind

      <h1>Vue Filters</h1>
      <p :id="122 | capitalize"></p>

Local filter

Note here that when the global filter and the local filter have the same name, the local filter will be used.

Local filters You can define local filters in a component's options:

export default {
  name: 'index',
  data() {
    return {
      price: 1999
    }
  },
  filters:
    capitalize: function (value) {
      if (!value) return ''
      return '￥' + value.toFixed(2) + '元'
    }
  }
}

Filters can be connected in series

In this example, filterA is defined as a filter function that accepts a single argument. The value of the expression message is passed into the function as an argument. Then continue to call the filter function filterB, which is also defined to receive a single parameter, and pass the result of filterA to filterB.

{{ message | filterA | filterB }}

Notice:

1. When there are two filters with the same name, local and global, they will be called based on the proximity principle, that is, the local filter will be called before the global filter!

2. An expression can use multiple filters. Filters need to be separated by pipe characters "|". The execution order is from left to right

Summarize

This is the end of this article about the must-know knowledge about filters in Vue. For more relevant Vue filter knowledge, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!