• Vue中过滤器如何使用？

    过滤器是对即将显示的数据做进⼀步的筛选处理，然后进⾏显示，值得注意的是过滤器并没有改变原来 的数据，只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器（局部过滤器）。

    目录

    全局过滤器

    本地过滤器

    过滤器传参

    串联过滤器

    全局过滤器

    下⾯定义⼀个全局过滤器，⽤于在数据前加上⼤写的VUE。需要注意的是，全局过滤器定义必须始终位于Vue实例之上，否则会报错。 
    1. <div id="app">
    2.    {{message | toAdd}}
    3. div>
    4. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    5. <script>
    6.     Vue.filter("toAdd", function(value) {
    7.         return 'VUE' + value
    8.    })
    9.     var demo = new Vue({
    10.         el: '#app',
    11.         data: {
    12.             message: '过滤器',
    13.        }
    14.    })
    15. script>
    对应的运行结果如下：
    注意： 1. Vue.filter() 后有两个参数：过滤器名，过滤器处理函数。 2. 过滤器处理函数也有⼀个参数：要过滤的数据。

    本地过滤器

    本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。 
    1. <div id="app">
    2.     <p>{{message | Reverse}}p>
    3.     <p>{{message | Length}}p>
    4. div>
    5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    6. <script>
    7.     var demo = new Vue({
    8.         el: '#app',
    9.         data: {
    10.             message: '过滤器',
    11.        },
    12.         filters: {
    13.             Reverse: function(value) {
    14.                 if (!value){
    15.                     return '';
    16.                }
    17.                 return value.toString().split('').reverse().join('');
    18.            },
    19.             Length: function(value) {
    20.                 return value.length;
    21.            },
    22.        },
    23.    })
    24. script>

    第一个p标签通过对得到的msg数据进行拆分，并将拆分之后的字符进行翻转，最后输出。第二个p标签通过获取得到的数据长度并显示出来。运行结果如下：

    过滤器传参

    除此之外，过滤器也是可以传递参数的。 

    1. <div id="app">
    2.    {{msg1 | toDou(1,2)}}
    3.    {{msg2 | toDou(10,20)}}
    4. div>
    5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    6. <script>
    7.     Vue.filter('toDou', function(value, param1, param2) {
    8.         if (param2 < 10) {
    9.             return value + param1;
    10.        } else {
    11.             return value + param2;
    12.        }
    13.    });
    14.     new Vue({
    15.         el: '#app',
    16.         data: {
    17.             msg1: 9,
    18.             msg2: 12,
    19.        }
    20.    });
    21. script>
    以上的代码第一条插值表达式对得到的msg1进行过滤，该toDou过滤器传入两个参数，在过滤器中对传入的参数进行判断，若传入的第二个参数小于10，则会返回对应的msg1值加上第一个参数的值。第二条插值表达式同上。最后运行结果如下：
    注意：过滤器处理函数的第⼀个参数，仍然是要过滤的数据。从第⼆个参数开始，才是过滤器本身要传递的参数。

    串联过滤器

    多个过滤器可以串联使⽤。 
    1. <div id="app">
    2.    {{money | prefix | suffix}}
    3. div>
    4. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    5. <script>
    6.     Vue.filter("prefix", function(value) {
    7.         return '￥' + value
    8.    })
    9.     Vue.filter("suffix", function(value) {
    10.         return  value + '元'
    11.    })
    12.     var demo = new Vue({
    13.         el: '#app',
    14.         data: {
    15.             money:10
    16.        }
    17.    })
    18. script>

    以上的代码主要是对插值表达式中的值同时添加了两个过滤器，money会先得到prefix过滤器的处理，并将处理之后的值再给suffix过滤器进行处理。对应的代码运行效果如下：

  • 相关阅读:
    django理解02 前后端分离中的问题
    C专家编程 第1章 C：穿越时空的迷雾 1.11 轻松一下---由编译器定义的Pragmas效果
    人红细胞膜带3蛋白修饰重组人脂质体/融合蛋白的细胞膜脂质gpi-ny-eso-1研究
    前后端分离&ApiFox(mock数据)&Swagger(后端)
    台式机window11安装ubuntu18.04后找不到wifi（网卡型号RTL8822CE）
    数据库专辑--WITH CHECK OPTION的用法
    42. 接雨水[动态规划+双指针]
    (转)富文本编辑器——Vue2Editor
    React篇
    小白大白读论文-关于EfficientNetV2论文的 疑问 与 总结
  • 原文地址：https://blog.csdn.net/weixin_51735748/article/details/132631933