当前位置:首页  >  前沿技术  >  详情

叮~新人资源包已送达

视频+笔记+工具+源码,

免费领3000G学习资源

web前端课程关于vue过滤器的那点事

来源:千锋教育
发布:web前端培训
2022-03-08

  web前端课程关于vue过滤器的那点事,关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面就带你了解一下如何定义过滤器和过滤器都有哪些种类。

HTML5

  vue 过滤器分类

  过滤器分为两种,一种是局部过滤器,一种全局过滤器。所有的过滤器都是函数,并且参数为要过滤的数据。

  局部过滤器:只允许在当前组件中使用
全局过滤器:所有组件都可以使用

1) 局部过滤器

// 创建 Vue 实例,得到 ViewModel

    var vm = new Vue({

        el: '#app',

        data: {

            msg: 'filter'

        },

        methods: {},

        //定义私用局部过滤器。只能在当前 vue 对象中使用

        filters: {

            dataFormat(msg) {

                return msg+'xxxxx';

            }

        }

    });

以上代码 filters 这个对象定义的就是局部过滤器,下面代码展示在组建中如何使用过滤器:

<div id="app">

            <p>{{ msg | dataFormat}}</p>

            // 结果   filterxxxxx

    </div>

当然你也应该在想,这样的过滤器使用起来可能会比较笨重,不够灵活,过滤器既然是函数,那是否可以传参呢?接下来我们通过参数让过滤器的使用变得更加灵活。

// 创建 Vue 实例,得到 ViewModel

    var vm = new Vue({

        el: '#app',

        data: {

            msg: 'filter'

        },

        methods: {},

        //定义私用局部过滤器。只能在当前 vue 对象中使用

        filters: {

            // msg表示要过滤的数据

            // a表示传入的参数

            dataFormat(msg,a) {

                return msg+a;

            }

        }

    });

    <!--html部分-->

     <div id="app">

            <p>{{ msg | dataFormat("你好")}}</p>

            <!--结果   <p>filter你好</p>-->

    </div>

2) 全局过滤器

<script>

        // 定义一个 Vue 全局的过滤器,名字叫做  toDouble 补零

        Vue.filter('toDouble', function(msg) {

            // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则

            return msg < 10 ? msg : "0" +msg

         })

    </script>

 

    <!-- html // -->

 

    <div> {{ 9 | toDouble }} </div>

    <!-- // 结果 <div>09</div> -->

总结

全局的过滤器要比局部过滤器使用的更广泛一些,说白了我们为什么要使用过滤器,其实就跟使用函数是一样,我们想把一些方法封装,供其它组件使用,这样调用起来方便,开发更快捷。

注意: 如果全局过滤器和局部过滤器名字重复,我们会按照远近使用,优先级 : 局部>全局

过滤器并不是只可以使用一个,一个数据可以用多个过滤器,从左向右执行,注意的下一个过滤器接收的是上一个过滤器的处理结果,因此千万要注意使用顺序。

----------------THE END---------------- 声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

web前端培训