vue自定义过滤器的创建与使用

Z时代
2024-01-10
分类：综合

vue

原文地址

过滤器：生活中有很多例子，净水器空气净化器。
过滤器的作用：实现数据的筛选、过滤、格式化。

vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。

1、过滤器创建
　　过滤器的本质是一个有参数有返回值的方法
　　

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

2、过滤器使用
语法：

<any>{{表达式 | 过滤器}}</any>

举个例子：

<h1>{{price | myCurrency}}</h1>

3、过滤器高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。

①如何给过滤器传参？

<h1>{{price | myCurrency(\'￥\',true)}}</h1>

②如何在过滤器中接收到？

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

　　示例

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