网友回复
过滤器主要是对数据进行过滤处理,对原始数据进行筛选后再进行展示。
主要用在两个地方: 双花括号插值{{ message | handleData }}
v-bind表达式<div v-bind:id="message | handleData"></div>
过滤器的格式
局部过滤器的默认格式为: filters: { handleData: function (value) { if(value>=60) return '及格' else return '不及格' }}
全局过滤器的默认格式为(在main.js添加,并不常用): Vue.filter('handleData', function(value) { if(value>=60) return '及格' else return '不及格' }) new Vue({ ...})
当全局过滤器与局部过滤器,会采用局部过滤器过滤器串联
{{ message | filterA | filterB }} 执行顺序为: 1.执行filterA过滤器,将表达式message的值作为参数传入filterA中 2.执行filterB过滤器,将filterA处理后的返回值作为参数传入filterB中 3.得到的返回值就是过滤后的最终结果。过滤器接收多个参数
{{ message | filterA('a','b')}}
这里filter接受了三个参数,表达式message的值,字符串'a',字符串'b'。当然也可以接受更多的参数,只需在filterA()中添加即可示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> {{score|handleData}} </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <script> new Vue({ el: '#app', data: function() { return { score:100, } }, filters: { handleData: function (value) { if(value>=60) return '及格' else return '不及格' } } }) </script> </body> </html>
参考文章:https://www.cnblogs.com/shenStudy/p/15350053.html