过滤器的基本使用

_enzo

已于 2022-08-28 12:33:37 修改

阅读量111

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2021-07-28 20:52:11 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/119189719

版权

Vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.全局过滤器

<body>
    <div id="app">
        <p>{{ msg | msgFormat('大好人', '123') | test }}</p> <!--传入参数-->
    </div>
    <script>
        //定义一个vue全局的过滤器，名为msgFormat
        Vue.filter('msgFormat', function(msg, arg1, arg2) {
            //第一个参数除了可写一个字符串，还可以定义一个正则表达式
            return msg.replace(/SB/g, arg1+arg2);
        })
        //过滤器可以多次调用
        Vue.filter('test', function(msg) {
            return msg+'....';
        })
        var vm = new Vue({
            el: "#app",
            data:{
              msg: '你是SB'
            },
            methods: {}
        });
    </script>
</body>

在这里插入图片描述

2.私有过滤器

<body>
    <div id="app">
        <p>{{ dt | msgFormat }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
              dt: new Date()
            },
            methods: {},
            filters: {
                msgFormat: function(dateStr, pattern='') {
                    var dt = new Date(dateStr);
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                    var d = dt.getDate().toString().padStart(2, '0');
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            }
        });
    </script>
</body>

在这里插入图片描述

过滤器调用采用就近原则，先调用私有过滤器，没有私有过滤器再调用全局过滤器

_enzo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过滤器的基本使用

1.全局过滤器<body> <div id="app"> <p>{{ msg | msgFormat('大好人', '123') | test }}</p>  </div> <script> //定义一个vue全局的过滤器，名为msgFormat Vue.filter('msgFormat', function(msg, arg1
复制链接

扫一扫