這一篇是對filter的探討
寫在這裡，貌似vue2.0對filter不支援，這裡採用的是vue1.0版本來進行演示和學習的。

filter的使用

內建方法

Vue內建提供幾種型別的過濾器

1. 字母操作類
2. json過濾器
3. 限制

字母操作類
Capitalize 將首字母轉化為大寫字母
Uppercase 全部轉化為大寫字母
lowercase 全部轉化為小寫字母

json過濾器
實質上是JSON.stringify()的精簡版，可將表示式轉化為JSON字串。

/js
didiFamily: {'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原理剖析