Of Stack

Detailed Explanation of the Implementation of Vue Custom Filter

  • 2021-07-10 18:12:37
  • OfStack

1 custom filter (registered in Vue global)

Precautions:

(1) The global method Vue. filter () registers a custom filter that must precede the Vue instantiation

(2) The filter function always takes the value of the expression as its first argument. Parameters with quotation marks are treated as strings, while parameters without quotation marks are evaluated as expressions

(3) You can set two filter parameters, provided that the two filters do not conflict with each other

(4) Data input from input can also be processed before being transmitted back to model 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue Custom filter </title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!-- The filter function always takes the value of the expression as the first 1 Parameters. Parameters with quotation marks are treated as strings, while parameters without quotation marks are evaluated as expressions. -->
      <p>{{message | sum | currency }}</p> <!-- Add two filters , Be careful not to conflict -->
      
      <input type="text" v-model="message | change"> <!-- User from input The input data is transmitted back to model You can also deal with it before -->
      
    </div>
    <script type="text/javascript">
    
//    ----------------------------------------- Gorgeous dividing line ( From model->view)---------------------------------------
      Vue.filter("sum", function(value) {  // Global approach  Vue.filter()  Registration 1 Custom filters , Must be placed Vue Instantiate the front 
        return value + 4;
      });
      
      Vue.filter('cal', function (value, begin, xing) {  // Global approach  Vue.filter()  Registration 1 Custom filters , Must be placed Vue Instantiate the front 
        return value + begin + xing;
      });

//    ----------------------------------------- Gorgeous dividing line ( From view->model)---------------------------------------
      Vue.filter("change", {
        read: function (value) { // model -> view  While updating  `<input>`  Formatted value before element 
          return value;
        },
        write: function (newVal,oldVal) { // view -> model  Formatting values before writing back data 
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });

      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        }
      });
      
    </script>
  </body>
</html>

2 custom filters (registered inside the instantiation)

The above example is directly registered on the Vue global, and other instances that do not use this filter will be forced to accept it. In fact, the filter can be registered inside the instance, only in the instance that uses it

The above program is rewritten as: 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue Custom filter </title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!-- The filter function always takes the value of the expression as the first 1 Parameters. Parameters with quotation marks are treated as strings, while parameters without quotation marks are evaluated as expressions. -->
      <p>{{message | sum | currency }}</p> <!-- Add two filters , Be careful not to conflict -->
      
      <input type="text" v-model="message | change"> <!-- User from input The input data is transmitted back to model You can also deal with it before -->
      
    </div>
    <script type="text/javascript">
      Vue.filter("change", {
        read: function (value) { // model -> view  While updating  `<input>`  Formatted value before element 
          return value;
        },
        write: function (newVal,oldVal) { // view -> model  Formatting values before writing back data 
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });

      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        },
        filters: {
          sum: function (value) {
            return value + 4;
          },
          cal: function (value, begin, xing) {
            return value + begin + xing;
          }
        }
      });
      
    </script>
  </body>
</html>
Related articles: