千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  IT问答库  >  Web培训课程

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

发布:web前端培训 2022-02-09 16:41

前端开发关于vue过滤器的那点事

推荐答案

  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> -->

总结

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

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

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

相关问题

web前端开发需要学习哪些课程

Javascript函数优先的轻量级解释型或及时编译型编程语言:被广泛...

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

  web前端课程关于vue过滤器的那点事,关于vue的过滤器,其实...

怎么才能学好web前端?

  Web前端是一个入行门槛较低的开发技术,但更是近几年热门的...

web前端培训课程学习内容是什么?

web前端培训课程学习内容是什么?因为工作原因,经常关...

Web前端培训课程都能学到些什么?

Web前端培训课程都能学到些什么?几乎每个互联网企业都需...

Web前端培训课程大纲分享!

近几年IT业可谓是发展火热,而且新生了很多的职业。例如...

测一测
你知道多少IT梗