Home > Article > Web Front-end > Detailed examples of how to create and use vue custom filters

Detailed examples of how to create and use vue custom filters

小云云Original: 2018-05-18 16:23:182739browse

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 处理后的数据
　　　　　　}
　　　　}
　　})

2. Filter usage

Syntax:
　2cfd83bcbfaff9bacc12c0937fd77054{{Expression|Filter}}fe444642c29a30e898f3de4e0f1d7b5b

For example Example:
　4a249f0d628e2318394fd9b75b4636b1{{price | myCurrency}}473f0a7621bec819994bb5020d29372a

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?

4a249f0d628e2318394fd9b75b4636b1{{price | myCurrency('￥',true)}}473f0a7621bec819994bb5020d29372a

②How to filter received?

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

　　}

})

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>

<!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>

<!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>

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!

Java servlet Filter

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed example of how Angular implements recursive display of blog comments and obtains data for reply commentsNext article：Detailed example of how Angular implements recursive display of blog comments and obtains data for reply comments

See more

Detailed examples of how to create and use vue custom filters

Related articles