Vue详解（三）过滤器_v-for 过滤

作者：我家小花儿 | 2024-02-11 19:57:52

踩

v-for 过滤

文章目录

Vue详解（三）过滤器

Vue详解（三）过滤器

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结构的简单的函数。在实际项目开发中根据实际需求，可以自己编写所需要的过滤器。

过滤器经常用在数据所需的格式化时使用：

字符串格式化。
日期时间的格式化。

例如：12.12.2050-10.10.10表示2050年12月12日，10点10分10秒，经过过滤器过滤（yyyy-MM-dd HH:mm:ss）后变为 2050-12-12 10:10:10

例如：字符串abcd经过filter，filter将小写字母变成大写字母的过滤器。最终展现在用户面前的字符串是ABCD。

过滤器最大的作用就是体现其复用性，如果前端处理的某些文本信息每一次都需要经过重复的特殊处理，那么一定要编写一个过滤器来使用。

1.全局过滤器的使用

全局过滤器指的是所有vm对象都能共享使用过滤器。过滤器能够使用在两个地方：

（mustache）插值表达式。
指令（bind）

过滤器的语法：使用管道符“|”

1.1将所有的字母变成大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>
<body>   
    <div id="app">
      <!-- 
        使用过滤器的语法：
        {{内容|过滤器}}
       -->
      <p>{{str1 | ucase}}</p>
    </div>
    <script>
      // 自定义全局过滤器
      /**
       *  语法：Vue.filter
       *  参数1：为该过滤器命名
       *  参数2：该过滤器的行为
       *          函数参数：我们需要操作的数据
      */
      Vue.filter('ucase', function (value) {
        // 通过value的形参取得了需要操作的值（aaa）
        // 将值处理为大写字母
        value = value.toUpperCase();

        return value;
      });
      var vm =new Vue({
        el:"#app",
        data:{
          "str1":"aaa"
        }
      })      
    </script>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

1.2 定义格式化时间的全局过滤器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">



        <p>{{currentTime | dateTimeManager}}</p>


    </div>
    <script>
        Vue.filter('dateTimeManager', function(dateTime) {
            // 取得日期 时间的具体数值
            // 将年月日时分秒分别取出，格式化为 2050-12-12 10：10：10

            var y = dateTime.getFullYear();
            // 不足两位 前面补零
            var m = dateTime.getMonth().toString().padStart(2, "0");
            var d = dateTime.getDate().toString().padStart(2, "0");

            var h = dateTime.getHours().toString().padStart(2, "0");
            var mm = dateTime.getMinutes().toString().padStart(2, "0");
            var s = dateTime.getSeconds().toString().padStart(2, "0");

            // 在ESS中，我们必须以使用+（拼接符）的形式来对字符串进行拼接的操作

            // return y + "-" + m + "-" + d;

            // ES6中，仅仅只使用反引号“ ` ”来解决复杂的字符串拼接的工作
            return `${y}-${m}-${d} ${h}-${mm}-${s}`;

        });

        var vm = new Vue({
            el: "#app",
            data: {
                "currentTime": new Date()
            }
        })
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

1.3 过滤器在v-for中的使用

将所有的商品进行打折（打8折打9折）。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">



        <p v-for="f in fruitList" ::key="f.id">
            {{f.name}}---------{{f.price | disCount5}}
        </p>

    </div>
    <script>
        Vue.filter('disCount8', function(value) {
            return parseInt(value) * 0.8;

        });

        Vue.filter('disCount5', function(value) {
            return parseInt(value) * 0.5;

        });

        var vm = new Vue({
            el: "#app",
            data: {
                "fruitList": [{
                    "id": "A0001",
                    "name": "苹果",
                    "price": 10
                }, {
                    "id": "A0002",
                    "name": "菠萝",
                    "price": 15
                }, {
                    "id": "A0003",
                    "name": "桃子",
                    "price": 8
                }]
            }
        })
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

以上的案例，都是使用在插值表达式之中，除了使用在插值表达式之中外，过滤器还可以用在bind属性指令当中。该形式没有插值表达式使用的广泛。

1.4. 可以连续使用多个过滤器。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
        连续使用多个管道符来连接多个过滤器
        {{str1 | 过滤器1 |过滤器2 | ....n}}
       -->
        <p>{{str1 | filter1 | filter2}}</p>
    </div>
    <script>
        // 过滤器1：将小写字母变成大写
        Vue.filter('filter1', function(value) {
            return value.toUpperCase();
        });
        // 过滤器2：在原有字符串的基础上，最后增加字符串123
        Vue.filter('filter2', function(value) {
            return value + "123";
        });

        var vm = new Vue({
            el: "#app",
            data: {
                "str1": "aaa"
            }
        })
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

2.私有过滤器的使用

私有过滤器指的是在指定的vm对象中来定义过滤器，该过滤器只在当前的vm对象中会发挥作用，其他的vm对象不能使用的。

语法：在vm对象中指定过滤器相关的属性和属性值。

vm
	filters:{
        filter1
        filter2
        ....
    }W
1
2
3
4
5
6

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">

        <p>{{str1 | filter3}}</p>
    </div>
    <br>
    <br>
    <div id="app2">
        <!-- filter3无法生效 -->
        <p>{{str1 | filter3}}</p>
    </div>
    <script>
        // 过滤器1：将小写字母变成大写
        Vue.filter('filter1', function(value) {
            return value.toUpperCase();
        });
        // 过滤器2：在原有字符串的基础上，最后增加字符串123
        Vue.filter('filter2', function(value) {
            return value + "123";
        });

        var vm = new Vue({
            el: "#app",
            data: {
                "str1": "aaa"
            },
            filters: {
                filter3: function(value) {
                    return value + "bbb";
                }
            }
        })

        var vm1 = new Vue({
            el: "#app2",
            data: {
                "str1": "aaa"
            }
        })
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

如果全局过滤器和私有过滤器的命名是一样的，那么默认使用的是私有过滤器。

系统在使用过滤器的时候，根据名称去找相应的过滤器，先找私有的过滤器，如果没有私有的，则继续通过该名称寻找全局过滤器。

这种方式称之为就近原则。（优先使用范围）

全局过滤器和私有过滤器是能够搭配在一起使用的。

        <p>{{str1 | filter1 | filter2 | filter3}}</p>

        <p>{{str1 | filter3 | filter2 | filter1}}</p>

1
2
3
4

可以同时使用多个过滤器。排在前面的过滤器的处理结果传递到下一个过滤器中继续进行后续处理。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/76752