怎么在vue项目中实现一个过滤器功能-创新互联
这篇文章主要介绍了怎么在vue项目中实现一个过滤器功能，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：
10多年的容城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。
成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整容城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。
成都创新互联公司从事“
容城网站设计”,“
容城网站推广”以来，每个客户项目都认真落实执行。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
过滤器
1.过滤器规则
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：
双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
{{ name | Upper }}
过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用，而本地过滤器则是指只有过滤器函数所在的Vue实例挂载的元素内可以使用
全局过滤器：
Vue.filter('Upper',function (name) {
return name.toUpperCase();
});本地过滤器：
var vm=new Vue({
el: '#app',
data: {
name:'martin'
},
filters:{
Upper:function (name) {
return name.toUpperCase()
}
}
})2.串联过滤器
{{name | filterA | filterB }}
解释：
第一步：先把name 放到 filterA过滤器中进行过滤
第二步：将第一步过滤器的结果再放到 filterB再进行过滤，显示最终过滤结果
3.过滤器也可以接收参数，因为过滤器说到底只是一个函数
{{ name | filterA('arg1', arg2) }}
解释：
filterA 在这里应该定义为接收三个参数的过滤器函数。其中 name 的值作为第一个参数，字符串 arg1 作为第二个参数，表达式 arg2 的值作为第三个参数。
最后送给大家一个实例：
源代码：
Title
add
search
