VUE3 basic tutorial: using filters for data filtering

VUE3 is currently a popular framework in front-end development. The basic functions it provides can greatly improve the efficiency of front-end development. Among them, filters are a very useful tool in VUE3. Using filters can easily filter, filter and process data.

So what are filters? Simply put, filters are filters in VUE3. They can be used to process the rendered data in order to present more desirable results in the page. Filters are functions that can be used in templates. They return processed results by passing in data and some parameters. In fact, many operations in our daily development can be simplified through filters.

Let’s learn how to use filters for data filtering.

First we need to define a filters attribute in the VUE3 instance. We can define multiple functions in this attribute as our filters. A simple example is provided below. In the example, we use the filter function of VUE3 to convert the input data into uppercase letters:

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

In the above example, we first use v-model to convert an input The label's data is bound to the input attribute defined in our instance. Then, a filter is referenced in the page with the name uppercase. Finally, an uppercase filter function is defined in the VUE3 instance. The main function of this function is to convert characters into uppercase letters.

It should be noted here that we can define multiple functions in filters. At the same time, we can also use multiple filters in the same tag by adding a vertical bar after the filter name. and the next filter name.

In addition to the string conversion in the above example, filters can also be used for formatting data types such as dates, currencies, numbers, etc. For example, we can use a filter function to convert timestamps into standard time format, the code is as follows:

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

We can also implement some special logic through filters, such as discounting prices:

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

As shown in the above code, the discount function in filters is somewhat different from the previous example. It uses two parameters. When used in the template, fill in the discount rate in the second bracket. Judging from the implementation effect, the parameters passed in will replace the value of val in the filter function.

To summarize, using VUE3 filters can conveniently process data, so that page data formatting and logical processing can be quickly implemented. In actual development, we can define multiple different filter functions as needed to complete data processing more efficiently and conveniently.

The above is the detailed content of VUE3 basic tutorial: using filters for data filtering. For more information, please follow other related articles on the PHP Chinese website!