在1.x版本中有內建過濾器，2.0版本開始內建過濾器被廢棄，需要自定義

內建過濾器（常用）

過濾器就是對資料的格式化，比如一個普通的數值要轉成貨幣格式：100 -> ￥100.00

過濾器和angular裡的是差不多一樣的，區別在傳遞引數時用空格代替冒號(:)

capitalize （首字母大寫）

格式化字串，首字母大寫

<!-- 結果：Hello world -->
<p>{{msg | capitalize}}</p>

<script>
    new Vue({
        data: {
            msg: 'hello world'
        }
    }).$mount('#app');
</script>

uppercase和lowercase （字串大小寫）

• uppercase: 字串格式化成大寫
• lowercase: 字串格式化成小寫

<!--結果：HELLO WORLD-->
<p>{{msg | uppercase}}</p>

<!--結果：hello world-->
<p>{{msg | lowercase}}</p>

<script>
    new Vue({
        data: {
            msg: 'Hello World'
        }
    }).$mount('#app');
</script>

currency （貨幣格式）

將數值格式化成貨幣格式

引數：

• currency [symbol] [decimal places]
  
  
  • {String} [symbol]: 貨幣單位，預設'$'
  • {Number} [decimal places]: 保留小數位，預設2，範圍0~20（1.0.22+）

<!--結果：$500.00-->
<p>{{dollar | currency}}</p>

<!--結果：¥500.00-->
<p>{{yuan | currency '¥'}}</p>

<script>
    new Vue({
        data: {
            yuan: 500,
            dollar: 500
        }
    }).$mount('#app');
</script>

注意如何傳參！

json （json資料格式化）

預設情況直接log一個json或者obj是一行顯示，json過濾器可以對json資料格式化成容易辨別的格式。

引數：

• json [indent]
  
  • {Number} [indent]: 縮排，預設2

<pre>{{jsonData | json 4}}</pre>

<script>
    new Vue({
        data: {
            jsonData: {
                "start": 20,
                "count": 10,
                "data": [
                    {"city": "廣州"},
                    {"city": "北京"}
                ]
            }
        }
    }).$mount('#app');
</script>

列印結果：

{
    "start": 20,
    "count": 10,
    "data": [
        {
            "city": "廣州"
        },
        {
            "city": "北京"
        }
    ]
}

limitBy （擷取）

要配合陣列一起使用，可以擷取陣列指定的長度進行操作。

引數：

• limitBy [limit] [offset]
  
  • {Number}[limit]: 擷取需要的資料
  • {Number}[offset]: 從第幾個開始擷取，預設0

<!--陣列的前5個元素，即0~4-->
<span v-for="item in limitArr | limitBy 5">{{item}} </span>
---
<!--陣列從第2+1個元素開始數5位元素，即3~7-->
<span v-for="item in limitArr | limitBy 5 2">{{item}} </span>

<script>
    new Vue({
        data: {
            limitArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    }).$mount('#app');
</script>

filterBy（過濾器）

注意，這個過濾器是指對資料的過濾。不是指vue中所有的過濾器（即標題），個人喜歡成為條件篩選或者條件匹配。

返回一個篩選後的陣列

引數：

• filterBy [...searchKeys]
  
  • {String | Function} target: 可以傳物件或方法，方法用於自定義
  • in 可選分隔符，查詢物件的時候使用
  • {String}[...searchKeys]: 關鍵字，在陣列中查詢你需要的關鍵字

過濾簡單型別陣列

<!-- 輸入關鍵字，對arr陣列進行匹配，返回匹配成功的元素 -->
<input type="text" v-model="ft">
<ul>
    <li v-for="item in arr | filterBy ft">{{item}}</li>
</ul>

<script>
    new Vue({
        data: {
            arr: ['css', 'js', 'html', 'c', 'oc'],
            ft: ''
        }
    }).$mount('#app');
</script>

過濾物件型別陣列

如果從陣列中遍歷出來的item是一個物件，過濾器會遞迴搜尋每一個物件中的屬性來和target字串進行匹配。使用in可以指定過濾器搜尋哪個屬性的值，這樣可以縮小搜尋範圍。

不用in會匹配陣列中所有物件的key，如：v-for="obj in objArr | filterBy ft"

<input type="text" v-model="ft">
<ul>
    <!-- filterBy ft in 'name'
        1. ‘name’是遍歷出來的obj內的屬性名稱
        2. ‘ft’ 是匹配‘name’屬性的值
    -->
    <li v-for="obj in objArr | filterBy ft in 'name'">{{obj.name}}</li>
</ul>

<script>
    new Vue({
        data: {
            ft: '',
            objArr: [
                {name: 'jack', friends: ['jony', 'chuck']}, 
                {name: 'jony', friends: ['jack', 'chuck']}, 
                {name: 'chuck', friends: ['jony', 'jack']}
            ]
        }
    }).$mount('#app');
</script>

自定義filter

• [...searchKeys]傳遞一個方法的時候，過濾器會傳3個引數進方法：

  • item: 當前遍歷的元素，如果是物件陣列這就是個物件
  • index: 當前遍歷的索引
  • arr: 遍歷的陣列

• 方法的返回值為boolean：

  • true: 不過濾當前的item
  • false: 過濾掉當前的item

官方文件只沒有細說。只說了傳遞function的時候可以自定義篩選方式。所以以上引數和返回值是我試出來的，大神看到錯誤請不要嫌麻煩，來糾正我的錯誤。

<input type="text" v-model="ft4">
<ul>
    <li v-for="item in arr | filterBy ftFunc">{{item}}</li>
</ul>

<script src="vue.js"></script>
<script>
    new Vue({
        data: {
            arr: ['css', 'js', 'html', 'c', 'oc'],
        },
        methods: {
            ftFunc(item, index, arr){    // es6語法
                return item === 'css' ? false : true;
            }
        }
    }).$mount('#app');
</script>

orderBy （排序）

對陣列的元素進行排序

引數：

• orderBy [sortKeys] [order]
  
  • {String | Array<String> | Function} [sortKeys]: 物件排序依據哪個屬性進行排序（簡單型別省略）
  • {String} [order]: 排序的方式，預設1，從小到達，字串從a到z，-1則相反

引數[order]和angular中的不同，angular是傳"-"和'"-"'

簡單型別的陣列排序

<ul>
    <li v-for="item in numArr | orderBy 1">{{item}}</li>
</ul>

<script>
    new Vue({
        data: {
            numArr: [9, 1, 7, 3, 4, 2, 6, 7, 8, 0, 10],
        },
    }).$mount('#app');
</script>

物件陣列排序

<ul>
<li v-for="obj in objArr | orderBy 'name' 1">{{obj.name}}</li>
</ul>

<script>
    new Vue({
        data: {
            objArr: [
                {name: 'jack', friends: ['jony', 'chuck']},
                {name: 'jony', friends: ['jack', 'chuck']},
                {name: 'chuck', friends: ['jony', 'jack']}
            ],
        }
    }).$mount('#app');
</script>

字串排序

<ul>
    <li v-for="item in strArr | orderBy 1">{{item}}</li>
</ul>

<script>
    new Vue({
        data: {
            strArr: ['css', 'js', 'html', 'c', 'oc'],
        }
    }).$mount('#app');
</script>

自定義過濾器

使用Vue.filter()方法自定義過濾器

// input: 管道符左邊的內容
// args: 過濾器傳遞的引數（使用的時候這裡我會報錯，不能傳遞引數。麻煩大牛解答一下）
Vue.filter('MyFilter', function (input, args1, args2) {
    return '$' + input;
});

new Vue({
    data: {
        msg: 'hello'
    }
}).$mount('#app');

<!--$100-->
<p>{{100 | MyFilter}}</p>