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'








阅读更多
个人分类: Vue
上一篇Vue--过滤器limitBy fiterBy orderBy
下一篇Node.js中的交互式运行环境----REPL
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭