vue系列教程（八）自定义过滤器

最新推荐文章于 2024-03-19 15:43:40 发布

菜鸟笔记本

最新推荐文章于 2024-03-19 15:43:40 发布

阅读量211

点赞数

分类专栏： vue 文章标签： vue自定义过滤器 vue局部过滤器 vue全局过滤器

本文链接：https://blog.csdn.net/qq_25983579/article/details/103000340

版权

vue 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

1. 简介

用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器

vue1.0中内置许多过滤器，如：
    currency、uppercase、lowercase
    limitBy
    orderBy
    filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
    a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
    b.使用自定义过滤器

3. 自定义过滤器

分类：全局过滤器、局部过滤器

3.l 自定义全局过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)

3.2 自定义局部过滤器

4. 代码案例

<script src="js/vue.js"></script>
    <script>
        /***
         * 自定义全局过滤器
         */
        Vue.filter('addZero',function(data){
            // console.log(data);
            /*自定义补零过滤器*/
            return data<10?'0'+data:data;
        });

        /*Vue.filter('number',(data,n) =>{
            return data.toFixed(n)
        });*/

        Vue.filter('date',(data) =>{
            let d=new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        });
        window.onload = function () {
            let vm = new Vue({
                el:'#itany',
                data:{
                    currentTime:Date.now()
                },
                filters:{
                    number:(data,n) =>{
                        return data.toFixed(n);
                    }
                }
            })
        }
    </script>
    <style>

    </style>
</head>
<body>
    <div id = "itany">
        <h3>{{18 | addZero}}</h3>

        <h3>{{12.6533| number(3)}}</h3>

        <h3>{{currentTime | date}}</h3>
    </div>
</body>

github代码下载地址:https://github.com/xiangjianming/vueStart.git

菜鸟笔记本

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue系列教程（八）自定义过滤器

1. 简介用来过滤模型数据，在显示之前进行数据处理和筛选语法：{{ data | filter1(参数) | filter2(参数)}}2. 关于内置过滤器vue1.0中内置许多过滤器，如： currency、uppercase、lowercase limitBy orderBy filterByvue2.0中已经删除了所有内置过滤器，全部被废除如何解...
复制链接

扫一扫

专栏目录