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

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

基本的书写格式如下:

{ { message | capitalize }}

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两层过滤得到最终结果。

 

具体怎么用?我们来看一个例子:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestFiltertitle>
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,再经过两层过滤,最终得到如下结果:

Vue框架中过滤器Filter的使用和细节_第1张图片

 

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

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

你可能感兴趣的:(JavaScript,Vue,前端,过滤器)