Vue学习之路第十七篇：全局过滤器的使用
1、过滤器
①：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（“|”）指示。使用方式为：{{ msg | formatMsg}}，其中msg为要被过滤的文本，formatMsg为过滤器名称。
②：过滤器的定义方式：
Vue.filter('formatMsg',function(msg){//对data数据进行处理的方法体});
这里定义了一个名为formatMsg的过滤器，过滤器的第一个参数为过滤器的名称；第二个参数为过滤方法，方法参数是要被过滤的文本，即管道符号前面的数据。
<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学习之路第十七篇：全局过滤器的使用的更多相关文章
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
- Vue学习之路第十三篇：v-for指令
v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...
随机推荐
- 转载 - C++ bitset类使用与简介
出处:http://blog.163.com/lixiangqiu_9202/blog/static/53575037201251121331412/ C++ bitset类的使用与简介 有些程序 ...
- Java经典线程同步问题------生产者与消费者
先上代码 class Test { public static void main(String []args) { Queue q=new Queue(); Producer p=new Produ ...
- Thread.yield()方法表示交出主动权，join表示等待当前线程，可以指定秒数
Thread.yield()方法表示交出主动权,join表示等待当前线程,可以指定秒数 学习了:http://www.importnew.com/14958.html 膜拜一下 源码膜拜: Threa ...
- 进行mysql压力測试须要注意的几点
1.填充測试数据比物理内存还要大,至少超过innodb_buffer_pool_size 值,不能将数据所有装载到内存中,除非你的本意就想測试全内存状态下的MySQL性能. 2.每轮測试完毕后,都重新 ...
- 再探Linux动态链接 -- 关于动态库的基础知识(Dynamic Linking on Linux Revisited)
在近一段时间里,由于多次参与相关专业软件Linux运行环境建设,深感有必要将这些知识理一理,供往后参考. 编译时和运行时 纵观程序编译整个过程,细分可分为编译(Compiling,指的是语言到平台 ...
- Oracle 与 MySql 区别
一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...
- jstl 标签 循环 序号
大家好: 今天搜了一天.最终找到它了,尽管不是我想要的,可是为了我辛苦的一天.我也要记录下: <c:forEach items="${signBusList}" var ...
- JPA设置表名和实体名，表字段与实体字段的对应
转自:https://blog.csdn.net/LQW_java_home/article/details/53079363 首先 你的jpaProperties配置项中要有 <prop ke ...
- HBase编程 API入门系列之HTable pool（6）
HTable是一个比较重的对此,比如加载配置文件,连接ZK,查询meta表等等,高并发的时候影响系统的性能,因此引入了“池”的概念. 引入“HBase里的连接池”的目的是: 为了更高的,提高程序的并发 ...
- Solr.NET快速入门(七)【覆盖默认映射器,NHibernate集成】
覆盖默认映射器 默认情况下,SolrNet使用属性映射Solr字段. 但是,您可能需要使用另一个映射程序. 替换默认映射器取决于您如何设置库: 内置容器 如果使用默认的内置容器,可以在调用Startu ...