Vue.js 过滤器

Posted 2022-02-05 shi_zi_183

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 过滤器相关的知识，希望对你有一定的参考价值。

Vue.js 过滤器

在了解过滤器之前，我们需要明确一个概念——过滤器，本质上都是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js使用管道符（|）进行连接

'abc' | uppercase

这里使用了Vue.js内置的过滤器uppercase，将字符串中的字母全部转换为大写形式。
Vue2不加载内置过滤器需要自己引入filter组件

<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>

Vue.js支持在任何出现表达式的地方添加过滤器。除了上面例子中的Mustache风格（双大括号）的表达式之外，还可以在绑定指令的表达式后调用。

<span :class="message | uppercase"></span>

表达式的值可以根据用户的输入来动态改变，也可以像abc一样采用固定值。
过滤器可以接受参数，参数跟在过滤器名称后面，参数之间以空格分隔。

 message | filterFunction 'arg1' 'arg2'

需要强调的是，过滤器函数将始终以表达式的值作为第一个参数。带引号的参数会被当作字符串处理，而不带引号的参数会被当作数据属性名来处理。这里，message将作为第一个参数，字符串age1作为第二个参数，表达式age2的值在计算出来之后作为第三个参数传给过滤器。
Vue.js的过滤器支持链式调用，上一个过滤器的输出结果可以作为下一个过滤器的输入

<span> 'ddfe' | capitalize| reverse </span>

Vue.js过滤器链式调用的特性能够让用户随心所欲地处理数据，这种将各种功能相对独立地过滤器函数组合起来解决复杂数据处理的方式与软件工程中的"高内聚、低耦合"设计思想有异曲同工之妙。

自定义过滤器

大多数情况下，Vue.js中内置的过滤器并不能满足我们的需求，好在Vue.js还提供了自定义过滤器的API供用户进行功能扩展。

filter

在Vue.js中也存在一个全局函数Vue.filter用于构造过滤器：

Vue.filter(ID,function())

该函数接受两个参数，其中第一个参数为过滤器ID，作为用户自定义过滤器的唯一标识；第二个参数则为具体的过滤器函数。过滤器函数以值为参数，返回转换后的值。
1、单个参数
注册一个名为reverse的过滤器，作用是将字符串反转输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>
</head>
<body>
    <div id="example">
        <span>message | reverse</span>
    </div>
</body>
<script>
    new Vue(
        el: "#example",
        data: 
            message: "abc"
        
    )
    Vue.filter('reverse',function (value) 
        return value.split('').reverse().join('');
    )
</script>
</html>

2、多参数
过滤器函数除了以值为参数外，还支持接受任意数量的参数，参数之间以空格分隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>
</head>
<body>
    <div id="example">
        <span>message | wrap('before','after')</span>
    </div>
</body>
<script>
    new Vue(
        el: "#example",
        data: 
            message: "abc"
        ,
        filters: 
            wrap: function (value,begin,end) 
                return begin + value + end
            
        
    )
</script>
</html>

以上是关于Vue.js 过滤器的主要内容，如果未能解决你的问题，请参考以下文章