Vue filter原理探究

这一篇是对filter的探讨
写在这里，貌似vue2.0对filter不支持，这里采用的是vue1.0版本来进行演示和学习的。

filter的使用

内置方法

Vue内置提供几种类型的过滤器

1. 字母操作类
2. json过滤器
3. 限制

字母操作类
Capitalize 将首字母转化为大写字母
Uppercase 全部转化为大写字母
lowercase 全部转化为小写字母

json过滤器
实质上是JSON.stringify()的精简版，可将表达式转化为JSON字符串。

/jsdidiFamily: {'name': 'ddfe','age': 3}/html<pre>{{didiFamily|json 4}}</pre>

显示：

限制

limitBy,filterBy,orderBy，用于处理数组，和v-for搭配使用。只能用在数组上面

自定义filter

自定义filter也非常方便，语法：vue.filter(ID,function(){})

1.可以接收单个参数：

Vue.filter("sum", function(value) {    return value + 4;})

2.多个参数

Vue.filter("cal", function(value, begin, xing) {    return value + begin + xing;})

3.双向过滤器

Vue.filter("change", {    read: function(value) {        return value    },    write: function(newVal, oldVal) {        console.log("newVal:" + newVal);        console.log("oldVal：" + oldVal);        return newVal;    }})

4.还可以接收动态的参数

Vue.filter("concat",function (value,input) {    return value+input;})<input  v-model="filterName" name=""><p>{{message|concat filterName}}</p>

以上就是filter的用法

filter原理剖析