Vue学习之过滤器(Filter)

最新推荐文章于 2024-07-04 10:07:27 发布

虞啊鱼

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量248

点赞数

分类专栏： Vue 文章标签： vue 过滤器 filter

本文链接：https://blog.csdn.net/weixin_42592879/article/details/108760528

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了Vue中的过滤器使用，包括全局和局部注册，以及一个时间戳转换的案例。过滤器允许对数据进行处理，如大小写转换和时间格式化。在案例中，展示了如何创建一个全局过滤器`parseTime`，将时间戳转换为日期字符串。通过`Vue.filter()`全局注册过滤器，并在Vue实例中应用到时间戳数据上。

摘要由CSDN通过智能技术生成

Vue学习之过滤器

Vue中的过滤器能让通过其中的数据发生一定的变化，可以过滤出数据中你要的那部分，或者是给数据做一些处理。比如大小写转换、时间–时间戳转换等等。

一、过滤器的注册

过滤器有全局注册和局部注册两种方式

1.全局注册

全局注册写在全局定义域中，用Vue.fliter()注册，需要两个参数，第一个过滤器的名字，第二个是一个函数，返回过滤的结果

Vue.filter('parseUpper', (date) => {
           return str.toUpperCase();
        })

2.局部注册

全局注册写在组件内部，局部注册的话，函数名就过滤器名称

new Vue({
            el: '#app',
            //局部注册过滤器
            filters: {
                parseUpper(str) {
                    return str.toUpperCase();
                }
            },
            data: {
            },
            methods: {},
        })

二、过滤器的使用

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

三、案例(时间戳转换)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id='app'>
        <div v-for="item in arr" :key="item.time">
            {{item.name}}
            {{item.time | parseTime}}
        </div>
    </div>
    <script>
        //全局注册过滤器
        Vue.filter('parseTime', (date) => {
            let time = new Date(date);
            return time.toLocaleDateString() + '' + time.toLocaleTimeString();
        })
        new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                arr: [
                    {
                        name: 'zhangsan',
                        time: 1600676292941
                    },
                    {
                        name: 'lisi',
                        time: 1600676293548
                    },
                    {
                        name: 'jack',
                        time: 1608576293548
                    },
                ],
            },
            methods: {},
        })
    </script>
</body>

</html>