vue过滤器

过滤器定义

  Vue.js 允许在表达式后面添加可选的过滤器,以管道符表示,例如:

{{ message | capitalize }}

      过滤器的本质是一个函数,接受管道符前面的值作为初始值,同时也能接受额外的参数, 返回值为经过处理后的输出值。多个过滤器也可以进行串联。例如:    

{{ message | filterA 'arg1' 'arg2' }}
{{ message | filterA | filterB}}

过滤器注册

      Vue.js 提供了全局方法 Vue.filter() 注册一个自定义过滤器,接受过滤器 ID 和过滤器函 数两个参数。例如:    

Vue.filter('date', function(value) { 
 if(!value instanceof Date) return value;  
 return value.toLocaleDateString();
})

这样注册之后,我们就可以在 vm 实例的模板中使用这个过滤器了。除了初始值之外,过滤器也能接受任意数量的参数。

<div>{{ date | date }} </div>
var vm = new Vue({
  el : '#app',
  data: {
   date : new Date()  }
});

双向过滤器  

        之前提及的过滤器都是在数据输出到视图之前,对数据进行转化显示,但不影响数据本身。Vue.js也提供在改变视图中数据的值,写回data绑定属性中的过滤器,称为双向过滤 器。例如:

<input type="text" v-model="price | cents" >
// 该过滤器的作用是处理价钱的转化,一般数据库中保存的单位都为分,避免浮点运算 Vue.filter('cents', {
  read : function(value) {
   return (value / 100).toFixed(2);
 },
  write : function(value) {
   return value * 100;
 }
});
var vm = new Vue({   
  el : '#app',
  data: {
   price : 150  }
});

动态参数

       过滤器除了能接受单引号('')括起来的参数外,也支持接受在 vm 实例中绑定的数据, 称之为动态参数。使用区别就在于不需要用单引号将参数括起来。例如:

<input type="text" v-model="price" /> <span>{{ date | dynamic price }}</span>
Vue.filter('dynamic', function(date, price) {
  return date.toLocaleDateString() + ' : ' + price; });
var vm = new Vue({
  el : '#app',
  data: {
   date : new Date(),
   price : 150
 }
});

过滤器在Vue.js 2.0中的变化

       过滤器在 Vue.js 2.0 中也发生了一些变化,大致说明如下:

1 取消了所有内置过滤器,即 capitalize, uppercase, json 等。作者建议尽量使用单独的插件来按需加入你所需要的过滤器。不过如果你觉得仍然想使用这些 Vue.js 1.0 中的内置过 滤器,也不是什么难办的事。1.0 源码 filters/ 目录下的 index.js 和 array-filter.js 中就是所有内置过滤器的源码,你可以挑选你想用的手动加到 2.0 中。

2 取消了对 v-model 和 v-on 的支持,过滤器只能使用在 {{}} 标签中。

3 修改了过滤器参数的使用方式,采用函数的形式而不是空格来标记参数。例如:{{ date | date('yyyy-MM-dd') }}。