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

当前位置:首页  >  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> -->

总结

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

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

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

最新问答资讯

01 unity用什么编程语言?unity学习难度大吗

学习 unity 语言
6020 人关注

02 python容易学吗?学好python有什么好处?

学习 python 工作 培训
5389 人关注

03 html是什么语言?html学习难吗?

学习 html 语言 可以
5062 人关注

04 c语言难学吗?c语言学好要多久?

语言 技术 学习
4733 人关注

06 学好平面设计要多久?报速成班靠谱吗?

平面 设计 学习 时间
4238 人关注

相关问题

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

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

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

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

怎么才能学好web前端?

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

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

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

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

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

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

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

测一测
你知道多少IT梗