gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson13
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
一 局部过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app1"> <h1>{{message | capitalize}}</h1> </div> </body> <script src="../js/vue.js"></script> <script> /** * * 局部过滤器（挂载到当前实例上） * */ var vm = new Vue({ el:'#app1', data:{ message :'international singer club' }, filters:{ capitalize:function (val) { /*接收到的是message*/ return val.toUpperCase(); } } }) </script> </html>
二 全局过滤器
<template>
<div>
<h1>{{message | uppercase}}</h1>
</div>
</template>
<script>
export default {
data(){
return{
message:'international singer club'
}
}
}
</script>
Vue.filter('uppercase',function (a,b,c) { return a.toUpperCase(); });
在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
三 串联过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app1"> <h1>{{message | capitalize | len}}</h1> </div> </body> <script src="../js/vue.js"></script> <script> /** * * 局部过滤器（挂载到当前实例上） * */ var vm = new Vue({ el:'#app1', data:{ message :'international singer club' }, filters:{ capitalize:function (val) { /*接收到的是message*/ return val.toUpperCase(); }, len:function (val) { return val+'----------'+val.length; } } }) </script> </html>
四 过滤器传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app1"> <h1>{{num1 | capitalize('12','5')}}</h1> <h1>{{num2 | capitalize('40','50')}}</h1> </div> </body> <script src="../js/vue.js"></script> <script> /** * * 局部过滤器（挂载到当前实例上） * */ var vm = new Vue({ el:'#app1', data:{ num1:9, num2:12 }, filters:{ capitalize:function (n,a,b) { if(n < 10){ return n+a+"当前num1小于10"; //912 }else{ return n+b+"当前num2大于10"; //1250 } } } }) </script> </html>
因为过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
注意：这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
双向过滤器之后有时间研究，大概写了一下，总是报错。