WEB前端：vuejs全家桶（11）：自定义全局过滤器、自定义局部过滤器

最新推荐文章于 2023-09-26 15:01:52 发布

hahahafree

最新推荐文章于 2023-09-26 15:01:52 发布

阅读量351

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102947431

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

过滤器

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.l 自定义局部过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        // 自定义全局过滤器
        Vue.filter('addZero', function(data) {
                return data < 10 ? '0' + data : data;
            })
            // 处理数字
            // Vue.filter('number', function(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 app = new Vue({
                el: '.itany',
                data: {
                    currentTime: Date.now()
                },
                filters: { //局部过滤器
                    number: (data, n) => {//ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
                        return data.toFixed(n);
                    }
                }
            });
        }
    </script>

</head>

<body>
    <div class="itany">
        <!-- <h3>{{13 | addZero}}</h3> -->
        <h3>{{12.0355 | number(2)}}</h3>
        <h3>{{currentTime | date}}</h3>
    </div>
</body>

</html>