Vue--自定义过滤器

自定义过滤器需要注意两点：

     1.需要给定过滤器一个唯一标识，如果自定义的过滤器与内置过滤器冲突，那么内置过滤器则会被覆盖。

     2.过滤器函数的作用是输入表达式的值，经过处理后输出。那么过滤器最好应该return一个有意义的值。

1.单个参数

HTML

<p v-text="message | reverse"></p>

自定义过滤器

Vue.filter('reverse',function(value){
			return value.split('').reverse().join('');
		})

脚本数据

message: 'abc',

浏览器显示结果

2.多参数

<p>{{msg}}的三次方为：{{msg | power '3'}}</p>
<p>{{mess}}</p>

Vue.filter('power',function(value,n){
	var sum=value;
	for(var i=1;i<n;i++){
		sum=sum*value;
			}
		return sum;
		});

msg: 2,

3.双向过滤器

<input type="text" v-model="mess | filterExample" name="">

Vue.filter('filterExample',{
			read:function(val){
				return 'read'+val;
			},
            write:function(newVal,oldVal){
            	return newVal+'write';
            }
		});

 mess: 'Hello Wrold'