过滤器：filter
格式化变量的输出内容，只用于一些简单的在制作的最后一步对内容的输出格式做些调整（如日期格式化，字母大小写，数字再计算等等）
例如我们需要将最终的结果字符串以大写方式展示出来，还有将小数转化成百分比之后再显示出来
<div id="app"> ???????<input type="text" v-model=‘message‘> {{ message | toupper }} ???????<br /> ???????<input type="text" v-model=‘num‘> {{ num | toprecentage }} ???</div><script> ???new Vue({ ???????el : ‘#app‘, ???????data: { ???????????message: ‘hello world !‘, ???????????num: 0.3, ???????}, ???????filters : { ???????????toupper : function(val){ ???????????????return val = val.toUpperCase(); ???????????}, ???????????toprecentage : function(val) { ???????????????return val = val * 100 + ‘%‘; ???????????} ???????} ???});</script>过滤器时通过一个 | 符号来实现的，| 前面的是需要处理的值，后面是过滤器的名称，在new Vue()中的filters中添加这些过滤器并写明处理方法就可以了，在处理方法function中可以有2个参数，第一个参数val就是 | 前面的这个值，第二个参数是同时需要传递进来的值，例如：在一个显示钱币单位的例子中
<div id="app"> ???????<input type="text" v-model.number=‘num‘>{{ num | currency(unit) }} ???</div><script> ???new Vue({ ???????el : ‘#app‘, ???????data: { ???????????num : 10 , ???????????unit : ‘元‘, ???????}, ???????filters : { ???????????currency : function(val ,unit){ ????????????????val = val || 0; ?????????????????unit = unit || ‘元‘; ????????????????return val + unit; ???????????} ???????} ???});</script>上面这个例子可以通过改变data中的对应的值来改变钱币数和单位，用到了2个参数，第二个参数的传递也很简单。
Vue.js 基础学习之过滤器
原文地址：http://www.cnblogs.com/huzhuo/p/7475542.html