Vue框架中过滤器Filter的使用和细节

最新推荐文章于 2022-08-24 09:31:55 发布

nZk丶

最新推荐文章于 2022-08-24 09:31:55 发布

阅读量339

点赞数

分类专栏： JavaScript&Vue 文章标签： JavaScript Vue 前端过滤器

本文链接：https://blog.csdn.net/weixin_43729854/article/details/102880254

版权

JavaScript&Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Filter过滤器顾名思义就是过滤数据的逻辑关卡，在vue框架中使用过滤器，处理数据的效率会大大增加，而且会让代码更加整洁，逻辑更加清晰。

基本的书写格式如下：

message是要被过滤的数据，capitalize是过滤器。

需要注意的三点是：

①capitalize可以传参，类似capitalize(x1,x2,x3.....)，但是要注意，这个括号里的参数列表里，一定是存有message的，只不过它没显示出来罢了。

比如：这里的{{message|capitalize(v2,v3)}}我们给message值为v1，那么过滤器capitalize的参数列表里其实是(v1,v2,v3)。

并且capitalize里的参数列表的元素可以是三元运算符。

②message可以有多个,写法：{{message1,message2|capitalize}}。

③过滤器可以串联,比如:{{message1|filter1|filter2}}这样的写法就会使message1经过filter1和filter2两层过滤得到最终结果。

具体怎么用？我们来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestFilter</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
    {{ message | capitalize('^ ^',label,1<10?"hello":"goodbye") | capitalize2}}
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'rookie',
            label:'———'
        },
        filters: {
            capitalize: function (value1,value2,value3,value4) {
                if (!value1) return ''
                value1 = value1.toString()
                console.log('capitalize1调用');
                return value1.charAt(0).toUpperCase() + value1.slice(1)+value2+value3+value4;
            },
            capitalize2: function (value1) {
                if (!value1) return ''
                value1 = value1.toString()
                console.log('capitalize2调用');
                return value1.charAt(0)+value1.charAt(1).toUpperCase() + value1.slice(2);
            }
        }
    })
</script>

</body>
</html>

以上代码中，我们把message给值为rookie，再经过两层过滤，最终得到如下结果：

rookie的前两个字母大写了，而且输出了一些字符串，逻辑是这样的:

rookie中的第一个r大写，和“^ ^---hello”字符串的书写，逻辑都是在capitalize里实现的，大家可以返回去看一下代码(hello的输出就用到了上面说的三元运算符传参)。
rookie中的第二个o大写，是在capitalize2里实现的。

nZk丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架中过滤器Filter的使用和细节

Filter过滤器顾名思义就是过滤数据的逻辑关卡，在vue框架中使用过滤器，处理数据的效率会大大增加，而且会让代码更加整洁，逻辑更加清晰。基本的书写格式如下：{{ message | capitalize }}message是要被过滤的数据，capitalize是过滤器。需要注意的三点是：①capitalize可以传参，类似capitalize(x1,x2,x3.....)，但...
复制链接

扫一扫