【Vue学习笔记】过滤器（filter）

最新推荐文章于 2024-07-22 17:46:29 发布

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

最新推荐文章于 2024-07-22 17:46:29 发布

阅读量235

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 学习

本文链接：https://blog.csdn.net/biancheng_/article/details/129212547

版权

Vue学习笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue.js允许自定义过滤器进行文本格式化，如在Vue1.x中有内置过滤器，但在Vue2.x中需全部自定义。过滤器可用在插值和v-bind表达式中。全局过滤器可通过Vue.filter()创建，私有过滤器则在Vue实例内定义，仅在其作用域内有效。文章提供了一个日期格式化的过滤器示例，强调了过滤器与自定义指令在用途上的区别。

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

前言

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、日期的格式化。vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

全局定义

我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称、过滤器函数。

Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
           		过滤器的功能
           		return 过滤的结果           
           })

使用

        <p>{{ msg | msgFormat }</p>

       v-bind:属性="数据 | 过滤器名(参数1,参数2)"

管道符前面的msg：要把 msg 这段文本进行过滤，
管道符后面的msgFormat：是通过msgFormat这个过滤器进行来操作。

自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

举例：日期格式化

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        {{ time }}
        <br />
        {{ time | datefmt }}
    </div>

</body>
<script>

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        },
        //在某一个vue对象内部定义的过滤器称之为私有过滤器，
        //这种过滤器只有在当前vue对象el指定的监管的区域有用
        filters: {
            // input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
            datefmt: function (input) {
                // 定义过滤器的内容：将input的值格式化成 yyyy-MM-dd 字符串输出
                var res = '';
                var year = input.getFullYear();
                var month = input.getMonth() + 1;
                var day = input.getDate();

                res = year + '-' + month + '-' + day;

                return res;
            }
        }
    });
</script>

</html>

上面的代码中，我们在vue实例中，通过filters关键字，在里面定义了一个局部过滤器datefmt。

运行结果：

第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。

自定义指令和过滤器的使用场景区别

1、相同点：自定义指令和过滤器都是封装

2、不同的：
1）、自定义指令使用在，dom操作上
2）、过滤器使用在：不需要做逻辑处理，只做数据(格式）转换。用的很少与，因为没多少必要

小知识

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器。

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue学习笔记】过滤器（filter）

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、日期的格式化。vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。我们可以用全局方法自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称、过滤器函数。
复制链接

扫一扫