玩转Vue过滤器,优雅实现数据操作!

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

目录

全局过滤器

本地过滤器

过滤器传参

串联过滤器


全局过滤器

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

本地过滤器

本地过滤器存储在vue组件中,作为filters属性中的函数,我们可以注册多个过滤器存储在其中。
<div id="app">
    <p>{{message | Reverse}}</p>
    <p>{{message | Length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var demo = new Vue({
        el: '#app',
        data: {
            message: '过滤器',
       },
        filters: {
            Reverse: function(value) {
                if (!value){
                    return '';
               }
                return value.toString().split('').reverse().join('');
           },
            Length: function(value) {
                return value.length;
           },
       },
   })
</script>

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

过滤器传参

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

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

串联过滤器

多个过滤器可以串联使⽤。
<div id="app">
   {{money | prefix | suffix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter("prefix", function(value) {
        return '¥' + value
   })
    Vue.filter("suffix", function(value) {
        return  value + '元'
   })
    var demo = new Vue({
        el: '#app',
        data: {
            money:10
       }
   })
</script>

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

  • 16
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 30
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 30
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值