vue自定义filters过滤器

当我们使用Vue的时候，经常需要对数据进行一些格式化或者处理，Vue提供了一种非常方便的机制：过滤器（Filters）。

什么是过滤器（Filters）？

过滤器是Vue在模板中的一种特殊的实用工具。它是用来格式化、过滤或转换模板中的数据的。基本上，它是一个函数，可以接收一个值或多个值作为参数，并且最终返回一个新的值作为输出结果。

如何定义Vue过滤器？

我们可以使用Vue.filter()方法来定义过滤器。该方法接受两个参数：过滤器名称和处理函数。处理函数接受模板中绑定的值作为第一个参数。

下面是定义一个简单过滤器的示例：

//定义一个名为reverse的过滤器
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
})

上面的代码定义了一个名为reverse的过滤器，它接受一个字符串作为输入并返回反转后的字符串。

接下来，我们需要在模板中使用这个过滤器：

<!-- 在模板中使用reverse过滤器 -->
{{ 'hello world' | reverse }}
<!-- 该模板将会输出'dlrow olleh' -->

在上面的模板中，我们通过竖线（|）符号将字符串'helloworld'传递给名为reverse的过滤器。Vue会自动调用我们定义的reverse过滤器来处理字符串。

如何定义过滤器的参数？

除了第一个参数之外，我们还可以在定义过滤器时传递其他参数：

Vue.filter('truncate', function(value, length) {
    if (value.length > length) {
        return value.substring(0, length) + '...';
    } else {
        return value;
    }
});

上面的代码定义了一个名为truncate的过滤器，它接受两个参数：要截断的字符串和截取的长度。如果输入的字符串长度超过了给定的长度，则返回截断后的字符串加上省略号。

这个过滤器可以这样在模板中使用：

<!-- 在模板中使用truncate过滤器 -->
{{ 'hello world' | truncate(5) }}
<!-- 该模板将会输出'hello...' -->

示例1：自定义过滤器，动态格式化日期

Vue.filter('formatDate', function(value, format) {
    var date = new Date(value);
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    format = format.replace(/yyyy/g, year);
    format = format.replace(/MM/g, (month < 10 ? '0' : '') + month);
    format = format.replace(/dd/g, (day < 10 ? '0' : '') + day);
    format = format.replace(/HH/g, (hour < 10 ? '0' : '') + hour);
    format = format.replace(/mm/g, (minute < 10 ? '0' : '') + minute);
    format = format.replace(/ss/g, (second < 10 ? '0' : '') + second);
    return format;
});

// 在模板中使用
{{ '2019-07-01 10:20:30' | formatDate('yyyy-MM-dd HH:mm:ss') }}

示例2：字数统计过滤器

Vue.filter('wordCount', function(value) {
    if (!value) return 0;
    return value.trim().split(/\s+/).length;
});

// 在模板中使用
<textarea v-model="content"></textarea>
<p>当前字数：{{ content | wordCount }}</p>

以上两个示例分别演示了如何自定义vue过滤器，以及如何传参传递。通过自定义过滤器，我们能够大大减少业务代码的复杂度，实现代码可重用性。