Vue Filter Usage and Custom Filter Usage

2021-07-18 06:42:13
OfStack

1. The usage of filters. Split expressions and filters with ''.

For example: {{msg filter}} {{msg filter (a)}} a identifies one parameter of filter.

Use two filters: {{msg myfilter myfilternumber}}

2. Custom filters

The structure of the filter is: Vue. filter ("id", function (value, a) {});

value is a parameter of the filter and is the default raw value. a is a custom 1 parameter.

Examples of custom filters:


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="vue.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="app">
    <!-- In the output string a The number of -->
    <span>msg Value of: {{msg}}, Among them a Number of: </span> {{msg | myfilter('a')}}
    <br>
    <!-- In the output string b The number of -->
    <span>msg Value of: {{msg}}, Among them b Number of: </span> {{msg | myfilter | myfilternumber}}

  </div>
</body>
<script type="text/javascript">
  Vue.filter("myfilter", function(value, arg) {
    // Return 1 Objects or json String, listing the characters in the string and the number of characters , Case insensitive 
    var obj = {};
    var s = value.split('').sort().join("");
    var reg = /(.)\1+/ig;
    var str = s.replace(reg, "$1"); // The result of removing duplicates from a string 
    var i = 0,
      n,
      a;
    while (s.length > 0) {
      a = str.charAt(i);
      n = s.lastIndexOf(a) + 1;
      obj[a] = n;
      s = s.substring(n);
      i++;
    }
    return arg ? obj[arg] : obj;
  });
  Vue.filter("myfilternumber", function(value) {
    return value.b;
  });
  var app1 = new Vue({
    el: "#app",
    data: {
      msg: "a1a1aba2babac"

    },
    methods: {

    }
  });
</script>

</html>