剛剛接觸vue.js，現在來總結一些我在學習過程中接觸過濾器的知識，不足的地方希望大家多多包涵：

1、常見過濾器：uppercase、lowercase、capitalize、currency、debounce(延遲)

      對這些簡單的過濾器我們只舉一個例子說明：

<div id="box">
    <input type="text" v-model="msg">  <br/>
    {{msg|uppercase}} <br/>   //將字母全部轉化成大寫
    {{*msg}} <br/>            //加*號表示資料只繫結一次
    {{{msg}}}                 //使得HTML轉意輸出
</
 
div>
<script>
    new Vue({
        el:"#box",
        data:{
            msg:"hello"
}
    })
</script>

2、陣列配合使用的過濾器：

   1.limitBy 限制陣列中顯示幾個  比如只要求出現兩個數字：

<div id="app">
    <ul>
        <li v-for="val in arr|limitBy 2">
            {{val}}
        </li>
    </ul
 
>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr:[1,2,3,4,5]
        }

</script>

   2.filterBy 過濾資料 找出我們需要顯示的數字、單詞or字母  比如：

<div id="app">
   <ul>
       <
 
li v-for="val in arr | filterBy 'o'">
           {{val}}
       </li>
   </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr:['apple','banana','orange','lemon']
        }
    })
</script>

   3.orderBy排序，和上面的用法一樣，orderBy 1表示正序，-1表示倒序

3、自定義過濾器：在專案開發中vue自帶的過濾器不能滿足我們的專案要求，我們就得自己定義一個過濾器，比如：

   Vue.filter(name,function(input){});這個自定義一般格式，具體例項如下：

<div id="app">
    {{a|toDou}}
</div>
<script>
    Vue.filter('toDou',function(input){
        return input<10?'0'+input:''+input;
    });
    var app = new Vue({
        el: '#app',
        data: {
           a:'9'
}
    })
</script>

希望對像我這樣剛入門的童鞋有幫助。