过滤器
过滤器本质是一个函数，接收管道符前面的值作为初始值，同时也接收额外的参数，返回值为经过过滤器处理的值。多个过滤器可以进行串联。例如：
{{msg | filterA 'arg_1' 'arg_2' }} //带任意参数的过滤器
{{ msg | filterA | filterB}} //串联的过滤器
过滤器注册
Vue.js 提供一个全局的方法Vue.filter()用来注册自定义的过滤器，接收过滤器 id 和过滤器函数两个参数。例如：
Vue.filter('uppercase', function(value){
return value.toUpperCase;
})
双向过滤器
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
}
});
从使用场景和功能来看，双向过滤器和第 2 章中提到的计算属性有点雷同。而 Vue.js 2.0中也取消了过滤器对 v-model、v-on 这些指令的支持，认为会导致更多复杂的情况，而且使用起来并不方便。所以 Vue.js 2.0 中只允许开发者在 {{}} 标签中使用过滤器，像上述对写操作有转化要求的数据，建议使用计算属性这一特性来实现。
动态参数
过滤器除了能接受单引号（''）括起来的参数外，也支持接受在 vm 实例中绑定的数据，称之为动态参数。使用区别就在于不需要用单引号将参数括起来。例如：
<span>{{ msg | filterA(name) }}<span>
Vue.filter('filterA', function(name){
return "Hello " + name
})
var vm = new Vue({
el: "#app",
data:{
name:'jack'
}
})
过滤器中接收到的参数 name 是vm.name
示例：
<!DOCTYPE html>
<html>
<head>
<title>filter</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<h2>大写过滤器： {{ lowermsg | uppercase }}</h2>
<h2>小写过滤器： {{ uppermsg | lowercase }}</h2>
<h2>带参数的过滤器： {{ lowermsg | filterA('say hello') }}</h2>
<h2>带动态参数的过滤器： {{ lowermsg | filterB(msg) }}</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
lowermsg: "this is lowermsg",
uppermsg: "THIS IS UPPERMSG",
msg: "hello Vue!!!!!!!!"
},
filters: {
uppercase: function(str){
return str.toUpperCase();
},
lowercase: function(str){
return str.toLowerCase();
},
filterA: function(self, arg){
return "this is " + arg;
},
filterB: function(self, arg){
return arg;
}
}
});
</script>
</body>
</html>
运行效果如下：
过滤器.png
过滤器在Vue.js 2.0中的变化
1、取消了所有内置过滤器，即 capitalize, uppercase, json 等。作者建议尽量使用单独的插件来按需加入你所需要的过滤器。不过如果你觉得仍然想使用这些 Vue.js 1.0 中的内置过滤器，也不是什么难办的事。1.0 源码 filters/ 目录下的 index.js 和 array-filter.js 中就是所有内置过滤器的源码，你可以挑选你想用的手动加到 2.0 中。② 取消了对 v-model 和 v-on 的支持，过滤器只能使用在 {{}} 标签中。
2、修改了过滤器参数的使用方式，采用函数的形式而不是空格来标记参数。例如：{{date | date('yyyy-MM-dd') }}。
网友评论