過濾器
V1.x 版本
過濾器基礎
過濾器是一個通過輸入數據，能夠及時對數據進行處理並返回一個數據結果的簡單函數。Vue有很多很便利的過濾器，可以參考官方文檔，http://cn.vuejs.org/api/#過濾器，過濾器通常會使用管道標志 “ | ”， 語法：
{{ msg | uppercase }}Vue自帶的過濾器
1.Vue自帶的過濾器:capitalize
功能:首字母大寫
語法：{{message | capitalize}}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自帶的過濾器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | capitalize}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message: "abc" } }) </script> </body> </html>2.Vue自帶的過濾器:uppercase
功能:全部大寫
語法： {{message | uppercase}}3.Vue自帶的過濾器:lowercase
功能:全部小寫
語法：{{message | lowercase}}4.Vue自帶的過濾器:currency
功能:輸出金錢以及小數點 參數: 第一個參數 {String} [貨幣符號] - 默認值: '$' 第二個參數 {Number} [小數位] - 默認值: 2 語法: {{message | currency '¥' "1"}} <!--輸出$123.5-->5.Vue自帶的過濾器:pluralize
功能: 如果只有一個參數，復數形式只是簡單地在末尾添加一個 “s”。如果有多個參數，參數被當作一個字符串數組，對應一個、兩個、三個…復數詞。如果值的個數多於參數的個數，多出的使用最后一個參數。 參數：{String} single, [double, triple, ... {{item | pluralize 'item'}} <!--輸出: 1 item 2 items 3 items-->6.Vue自帶的過濾器:debounce
(1)限制： 需在@里面使用 (2)參數:{Number} [wait] - 默認值： 300 (3)功能：包裝處理器，讓它延遲執行 x ms， 默認延遲 300ms。包裝后的處理器在調用之后至少將延遲 x ms， 如果在延遲結束前再次調用，延遲時長重置為 x ms。 <button id="btn" @click="disappear | debounce 10000">點擊我,我將10秒后消失</button>7.Vue自帶的過濾器:limitBy
(1)限制:需在v-for(即數組)里面使用 (2)兩個參數: 第一個參數:{Number} 取得數量 第二個參數:{Number} 偏移量 <ul v-for="item in lili | limitBy 10"> <!--輸出1 2 3 4 5 6 7 8 9 10--> <li>{{item}}</li> </ul>8.Vue自帶的過濾器:filterBy
(1)限制:需在v-for(即數組)里面使用 (2)三個參數: 第一個參數: {String | Function} 需要搜索的字符串 第二個參數: in (可選,指定搜尋位置) 第三個參數: {String} (可選,數組格式) <ul v-for="item in man | filterBy 'l' in 'name' "> <!--輸出lily lucy,含義輸出name屬性中含有l開頭的名字--> <li>{{item.name}}</li> </ul>9.Vue自帶的過濾器:orderBy (1)限制:需在v-for(即數組)里面使用
(2)三個參數: 第一個參數: {String | Array<String> | Function} 需要搜索的字符串 第二個參數: {String} 可選參數 order 決定結果升序（order >= 0）或降序（order < 0）,默認是升序2.0版本過濾器
在Vue2.0版本中1.0自帶過濾器均不可用，須采用自定義函數。官網提示： Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達式（從 2.1.0 開始支持）中使用，因為過濾器設計目的就是用於文本轉換。為了在其他指令中實現更復雜的數據變換，你應該使用計算屬性。new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })過濾器可以串聯：
{{ message | filterA | filterB }}過濾器是 JavaScript 函數，因此可以接受參數：
{{ message | filterA('arg1', arg2) }}這里，字符串 'arg1' 將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數。
過濾器項目應用總結
1.過濾器使用添加的全局的過濾器使用時，必須定義在 Vue實例初始化前面,否則過濾器定義無效！ Vue.filter("discount",function (value,discount) { return value * (discount/100); }); Vue.filter("discount1",function (value) { return value * 100; }); 2.對於子組件而言，父組件中自定義的過濾器在子組件中使用無效！可使用全局添加的過濾器或在子組件內部自定義過濾器！ 子組件中添加自定義過濾器！ filters:{ discount:function (value,discount) { return value *(discount / 100); //| discount(25) | discount1 }, discount1:function (value) { return value * 100; } } 3.對於1.0版本中常用的自帶過濾器 limitBy,filterBy,orderBy,可以分別采用分別用Array.slice,Array.filter和 Array.sort重寫一遍並不復雜。計算屬性
使用場景
當模板中放入太多的邏輯，模板過重且難以維護時，你都應當使用計算屬性。基礎例子
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) </script>這里我們聲明了一個計算屬性 reversedMessage 。我們提供的函數將用作屬性 vm.reversedMessage 的 getter 。 vm.reversedMessage 的值始終取決於 vm.message 的值。 你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道 vm.reversedMessage 依賴於 vm.message ，因此當 vm.message 發生改變時，依賴於 vm.reversedMessage 的綁定也會更新。而且最妙的是我們是聲明式地創建這種依賴關系：計算屬性的 getter 是干凈無副作用的，因此也是易於測試和理解的。計算緩存 vs Methods
區別：不同的是計算屬性是基於它的依賴緩存,而methods不依賴緩存，每一次都需要重新執行；
計算屬性只有在它的相關依賴屬性值發生改變時才會重新取值。
computed: {
now: function () {
return Date.now() } } 計算屬性將不會更新，因為 Date.now() 不是響應式依賴; 我們為什么需要緩存？假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter ！如果你不希望有緩存，請用 method 替代。計算屬性 vs Watched Property
區別：計算屬性可以監聽多個依賴屬性發生變化時，去觸發某一個執行函數（功能上更偏向與計算,數據的處理），而Watched Property 的本質是監聽單一依賴屬性發生變化時，獲取該屬性值變化時newVal oldVal觸發執行函數（偏向於屬性值得監聽）計算 setter
計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
computed: {
fullName: {
// getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } 現在在運行 vm.fullName = 'John Doe' 時， setter 會被調用， vm.firstName 和 vm.lastName 也會被對應更新。觀察 Watchers
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過 watch 選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
使用 watch 選項允許我們執行異步操作（訪問一個 API），限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這是計算屬性無法做到的。