How to use filters in Vue?

The filter is to further screen the data to be displayed, and then display it. It is worth noting that the filter does not change the original data, but only generates new data based on the original data. Filters are divided into global filters and local filters (local filters).

Table of contents

global filter

local filter

filter parameter

inline filter

global filter

A global filter is defined below, which is used to add uppercase VUE in front of the data. It should be noted that the global filter definition must always be above the Vue instance, otherwise an error will be reported.

<div id="app">
   {
     
     {message | toAdd}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter("toAdd", function(value) {
        return 'VUE' + value
   })
    var demo = new Vue({
        el: '#app',
        data: {
            message: '过滤器',
       }
   })
</script>

The corresponding running results are as follows:

Note: 1. There are two parameters after Vue.filter(): filter name and filter processing function. 2. The filter processing function also has a parameter: the data to be filtered.

local filter

Local filters are stored in vue components, as a function in the filters property, we can register multiple filters to be stored in it.

<div id="app">
    <p>{
      
      {message | Reverse}}</p>
    <p>{
      
      {message | Length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var demo = new Vue({
        el: '#app',
        data: {
            message: '过滤器',
       },
        filters: {
            Reverse: function(value) {
                if (!value){
                    return '';
               }
                return value.toString().split('').reverse().join('');
           },
            Length: function(value) {
                return value.length;
           },
       },
   })
</script>

The first p tag splits the obtained msg data, flips the split characters, and finally outputs them. The second p tag obtains the length of the data obtained and displays it. The result of the operation is as follows:

filter parameter

In addition, filters can also pass parameters.

<div id="app">
   {
      
      {msg1 | toDou(1,2)}}
   {
      
      {msg2 | toDou(10,20)}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter('toDou', function(value, param1, param2) {
        if (param2 < 10) {
            return value + param1;
       } else {
            return value + param2;
       }
   });
    new Vue({
        el: '#app',
        data: {
            msg1: 9,
            msg2: 12,
       }
   });
</script>

The first interpolation expression of the above code filters the obtained msg1. The toDou filter passes in two parameters, and the passed in parameters are judged in the filter. If the second passed in parameter is less than 10, then Will return the corresponding msg1 value plus the value of the first parameter. The second interpolation expression is the same as above. The final running result is as follows:

Note: The first parameter of the filter processing function is still the data to be filtered. Starting from the second parameter is the parameter to be passed by the filter itself.

inline filter

Multiple filters can be used in series.

<div id="app">
   {
        
        {money | prefix | suffix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter("prefix", function(value) {
        return '￥' + value
   })
    Vue.filter("suffix", function(value) {
        return  value + '元'
   })
    var demo = new Vue({
        el: '#app',
        data: {
            money:10
       }
   })
</script>

The above code mainly adds two filters to the value in the interpolation expression at the same time. Money will be processed by the prefix filter first, and the processed value will be processed by the suffix filter. The corresponding code operation effect is as follows: