Detailed examples of how to create and use vue custom filters

小云云

Release： 2018-05-18 16:23:18

Original

2802 people have browsed it

This article mainly introduces the creation and use of vue custom filters in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Filter: There are many examples in life, water purifier and air purifier.

The role of the filter: to filter, filter and format data.

vue1.* version has built-in filters, but in vue2.* all versions no longer have built-in filters.

1. Filter creation

The essence of filter is a method with parameters and return value

　　new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
　　})

Copy after login

2. Filter usage

Syntax:
　{{Expression|Filter}}

For example Example:
　

3. Advanced usage of filters

When using filters You can also specify parameters to tell the filter to filter data according to the parameters.

①How to pass parameters to the filter?

②How to filter received?

new Vue({
　　filters:{
　　　　//myInput是通过管道传来的数据
　　　　//arg1在调用过滤器时在圆括号中第一个参数
　　　　//arg2在调用过滤器时在圆括号中第二个参数
　　　　myCurrency:function(myInput,arg1,arg2){
　　　　　　return 处理后的数据
　　　　}

　　}

})

Copy after login

Code:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{price}}</h1>
 <h1>{{price | myCurrency(&#39;￥&#39;)}}</h1>
</p>

<script>
 // filter
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   price:356
  },
  //过滤器的本质 就是一个有参数有返回值的方法
  filters:{
   myCurrency:function(myInput,arg1){
    console.log(arg1);
    //根据业务需要，对传来的数据进行处理
    // 并返回处理后的结果
    var result = arg1+myInput;
    return result;
   }
  }
 })
</script>

</body>
</html>

Copy after login

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{name | myTextTransform(false)}}</h1>
</p>

<script>
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   name:&#39;Michael&#39;
  },
  filters:{
   myTextTransform: function (myInput,isUpper) {
    if(isUpper)
    {
     return myInput.toUpperCase();
    }
    else{
     return myInput.toLowerCase();
    }
   }
  }
 })
</script>

</body>
</html>

Copy after login

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>过滤器</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <h1>{{price}}</h1>
  <h1>{{price|myCurrency}}</h1>
 </p>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    price:356
   },
//过滤器的本质 就是一个有参数有返回值的方法
   filters:{
    myCurrency:function(myInput){
     var result = "$"+myInput;
     return result;
    }
   }
  })
 </script>
 </body>
</html>

Copy after login

The last example is hard-coded.

Related recommendations:

Detailed explanation of Angularjs filter to implement dynamic search and sorting functions

About Filter filter in JavaWeb Servlet Example analysis

Detailed examples of filter, listener, and interceptor mechanisms in java

The above is the detailed content of Detailed examples of how to create and use vue custom filters. For more information, please follow other related articles on the PHP Chinese website!

Detailed examples of how to create and use vue custom filters

{{price | myCurrency}}

{{price | myCurrency('￥',true)}}