Vue自定义过滤器-优快云博客

本文介绍了Vue中自定义过滤器的方法，包括基本定义语法、如何传参动态更改过滤文字及多个过滤器的同时调用。并通过实例展示了如何使用过滤器进行数据格式化。

Vue自定义过滤器

定义语法

Vue.filter('过滤器名字',function (data) {
   //处理数据的操作
})
-------------------------------------案列一  将以后替换成将来-------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq}}
</div>
</body>
<script>
    /*过滤器的定义语法 第一个参数规定死了  肯定是管道符传过来的数据*/
    Vue.filter('glq',function (data) {
        /*replace 可写一个字符串  还可以写正则表达式*/
        //return data.replace('以后','将来');
        return data.replace(/以后/g,'将来');
    })

    new Vue({
        el: "#app",
        data:{
            mes:"以后的以后你是谁的某某某"
        }
    });
</script>
</html>

-------------------------------------案列一  传参数动态更改修改的文字可以传递多个参数  -------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq('现在')}}

//多个参数在后面加即可glq('现在'，'十年后'，'百年后')


</div>
</body>
<script>
    /*过滤器的定义语法 第一个参数规定死了  肯定是管道符传过来的数据*/
    Vue.filter('glq',function (data,arg) {//多个参数在后面加即可(data,arg,arg1,.....)


        /*replace 可写一个字符串  还可以写正则表达式*/
        //return data.replace('以后','将来');
        return data.replace(/以后/g,arg);
    })

    new Vue({
        el: "#app",
        data:{
            mes:"以后的以后你是谁的某某某"
        }
    });
</script>
</html>

-------------------------------------过滤器可以同时调用多个  定义完成在{{}}添加即可  -------------------------------------------------------

-------------------------------------案列二 -------------------------------------------------------

item.ctime为new date();

pattern 为格式

-------------------------------------私有过滤器-------------------------------------------------------

定义在组件内部filters

参数可以给默认值 pattern = ' '

转载于:https://www.cnblogs.com/jiahaoJAVA/p/9471257.html