Vue学习之路第十七篇：过滤器的使用
Posted shibin90
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习之路第十七篇：过滤器的使用相关的知识，希望对你有一定的参考价值。
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学习之路第十七篇：过滤器的使用的主要内容，如果未能解决你的问题，请参考以下文章