1、过滤器

①：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（“|”）指示。使用方式为：{{ msg | formatMsg}}，其中msg为要被过滤的文本，formatMsg为过滤器名称。

②：过滤器的定义方式：

Vue.filter('formatMsg',function(msg){//对data数据进行处理的方法体});

这里定义了一个名为formatMsg的过滤器，过滤器的第一个参数为过滤器的名称；第二个参数为过滤方法，方法参数是要被过滤的文本，即管道符号前面的数据。

2、看简单例子：
<body>

    <div id="app">

        <p>{{ msg }}</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                msg:'曾经小小少年，有小小的梦，小小的开始，小小的进步，小小的实现'

            },

            methods:{}

        });

    </script>

</body>

这里只是在页面简单的展示了msg定义的数据。现在我们要使用过滤器把msg里文本为“小小”的字符串替换为“大大”。

    <div id="app">

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

    </div>

页面上调用名字为formatMsg的过滤器

 //定义过滤器

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

       return msg.replace(/小小/g,'大大');

});

这里定义了名称为formatMsg的过滤器，过滤器中调用replace方法把“小小”替换为“大大”。运行结果如下：

3、过滤器还可以添加任意多个参数

   <div id="app">

        <p>{{ msg | formatMsg('超级','大大') }}</p>

    </div>

这里过滤器有两个参数，那么在定义过滤器时，应该在相对应的过滤方法中展示对应的参数：

    Vue.filter('formatMsg',function(msg,arg1,arg2){

         return msg.replace(/小小/g,arg1 + arg2);

    });

这里过滤方法中的第一个参数为需要过滤的文本，后面的参数为过滤器调用时带的参数。运行结果如下：

每天进步一点点！

Vue学习之路第十七篇：全局过滤器的使用的更多相关文章

  1. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  2. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  3. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  4. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  5. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  6. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  7. Vue学习之路第五篇：v-bind

    v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...

  8. Vue学习之路第四篇：v-html指令

    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...

  9. Vue学习之路第十三篇：v-for指令

    v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...

随机推荐

  1. [Codeup 25482]选美

    [Codeup 25482 ]选美 题目 一年一度的星哥选美又拉开了帷幕 N个人报名参加选拔,每个人都有着各自的相貌参数和身材参数(不大于 10000 的正整数).你的任务是尽可能让更多人被星哥选中, ...

  2. hdu 3714 三分

    #include<stdio.h> #define mi 1e-9 #define N 11000 struct node{ double x,y,z; }a[N]; int n; dou ...

  3. Codeforces 525E Anya and Cubes 中途相遇法

    题目链接:点击打开链接 题意: 给定n个数.k个感叹号,常数S 以下给出这n个数. 目标: 随意给当中一些数变成阶乘.至多变k个. 再随意取一些数,使得这些数和恰好为S 问有多少方法. 思路: 三进制 ...

  4. Codeforces444A_DZY Loves Physics

    DZY Loves Physics time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. GitLab创建项目

    创建自己的项目:通过地址进入 在文件夹下使用git bash进行 git init,然后ctrl+右键使用TortoiseGit>右键setting 然后再右键setting 拷贝代码时注意要h ...

  6. Item 8：析构函数不要抛出异常 Effective C++笔记

    Item 8: Prevent exceptions from leaving destructors. 析构函数不要抛出异常 因为析构函数经常被自己主动调用,在析构函数中抛出的异常往往会难以捕获,引 ...

  7. 【字符串处理算法】字符串包括的算法设计及C代码实现

    一.需求描写叙述 给定一个长字符串和一个短字符串.编敲代码推断短字符串中的全部字符是否都在长字符串中.假设是,则长字符串包括短字符串:反之,不包括. 为了尽量包括大多数情况,字符串中能够包括大写和小写 ...

  8. cocos2dx3.0 结构图

    图片较大.请下载看 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdzE4NzY3MTA0MTgz/font/5a6L5L2T/fontsize/400/f ...

  9. 单点登录 SSO 的实现原理 SESSION COOKIE Memcache

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  10. 详解Dialog(二)——有关列表的构建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 前言:这段时间真是忙啊忙啊忙,元旦三天假加了两天班,已经连续六周只放一天了,天天加班到十点多,真是有一口血吐在屏幕上的感觉了,博 ...