Vue的过滤器

最新推荐文章于 2023-07-05 14:29:57 发布

richest_qi

最新推荐文章于 2023-07-05 14:29:57 发布

阅读量1k

点赞数

分类专栏： Vue2 文章标签：过滤器格式化

本文链接：https://blog.csdn.net/qzw752890913/article/details/122740376

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

文章目录

显示格式化后的时间，可以通过以下几种方式实现：

computed，使用计算属性实现。
methods，使用方法实现。
filters，使用过滤器实现。

使用计算属性实现

时间格式化使用了第三方库dayjs。dayjs是一个轻量级处理时间和日期的Javascript库，和memontjs类似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{fmtTime}}</h4>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        }
    })
    </script>
</body>
</html>

使用methods实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{getFmtTime()}}</h4>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
    })
    </script>
</body>
</html>

使用过滤器实现

要对数据进行特定格式化后再显示时，可以使用过滤器。
过滤器本质是一个函数。过滤器适用于处理一些简单的逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{time | timeFormatter}}</h4>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        filters:{
            timeFormatter(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
            }
        }
    })
    </script>
</body>
</html>

过滤器可以接收额外的参数

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{time | timeFormatter}}</h4>
        <h4>现在的时间是：{{time | timeFormatter()}}</h4>
        <h4>现在的时间是：{{time | timeFormatter("YYYY-MM-DD")}}</h4>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        filters:{
            timeFormatter(value,format="YYYY年MM月DD日 HH:mm:ss"){
                return dayjs(value).format(format);
            }
        }
    })
    </script>
</body>

在这里插入图片描述

过滤器可以串联

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{time | timeFormatter}}</h4>
        <h4>现在的时间是：{{time | timeFormatter | slicer}}</h4>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        filters:{
            timeFormatter(value){
                return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
            },
            slicer(value){
                return value.slice(0,4);
            }
        }
    })
    </script>
</body>

在这里插入图片描述

全局过滤器与局部过滤器

注册过滤器有两种方式：

new Vue({filters:{}})，注册局部过滤器
Vue.filter(name,callback)，注册全局过滤器

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h4>现在的时间是：{{time | timeFormatter | slicer}}</h4>
    </div>
    <div id="root2">
        <div>{{message | slicer}}</div>
    </div>
    <script>
    Vue.config.productionTip = false;
    Vue.filter("slicer",function(value){
        return value.slice(0,4);
    })
    new Vue({
        el:"#root",
        data:{
            time:1643424117788
        },
        filters:{
            timeFormatter(value){
                return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
            }
        }
    })
    new Vue({
        el:"#root2",
        data:{
            message:"hello world"
        }
    })
    </script>
</body>

其中，timeFormatter就是局部过滤器，slicer就是全局过滤器。
在这里插入图片描述

小结

注册过滤器的两种方式：
1. 注册全局过滤器： Vue.filter(name,callback)
2. 注册局部过滤器：new Vue({filters:{}})
过滤器可以接收额外参数。
过滤器可以进行串联。

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的过滤器

文章目录使用计算属性实现使用methods实现使用过滤器实现过滤器可以接收额外的参数过滤器可以串联全局过滤器与局部过滤器小结显示格式化后的时间，可以通过以下几种方式实现：computed，使用计算属性实现。methods，使用方法实现。filters，使用过滤器实现。使用计算属性实现时间格式化使用了第三方库dayjs。dayjs是一个轻量级处理时间和日期的Javascript库，和memontjs类似。<!DOCTYPE html><html lang="en">
复制链接

扫一扫