過濾器vue
介紹過濾器本質上就是函數,做用在於用戶輸入數據後進行處理並返回一個結果。使用管道符(|)鏈接。json
分類api
內置過濾器數組
實例:markdown
{{'abc' | uppercase}} //'abc' => 'ABC'
這裏使用了內置過濾器 uppercase ,將字符串改成大寫。ide
自定義過濾器函數
特色this
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wNI8lqc8-1591182356367)(/Users/mxj/Library/Application Support/typora-user-images/image-20200603130112004.png)]atom
capitalize 、 uppercase 、 lowercase 用於處理英文字符,且僅對英文字符串使用。spa
capitalize
用於將表達式中的首字母轉爲大寫。
{{ 'def' | capitalize}} // 'Def'
uppercase
用於將表達式中的全部字母轉爲大寫。
lowercase
用於將表達式中的全部字母轉爲小寫。
用於將字符串的值轉換爲 json 字符串,帶有一個數值參數表示轉換以後字符串的縮緊距離,默認爲2。
<pre>{{ didFamily | json 4 }}</pre>
上例表示以4個空格打印一個json字符串
limitBy、filterBy、orderBy 用於處理並返回過濾後的數組。
limitBy
限制數組爲開始的 N 個元素,N 由傳入的第一個參數決定;第二個參數可選,指定數組的偏移量,默認爲0,若是爲5, 則表示從下標爲5的地方開始計數。
//只顯示開始的10個元素 <div v-for="item in items | limitBy 10" //顯示第5到第10個元素 <div v-for="item in items | limitBy 10 5"
filterBy
過濾條件爲:'function || string ’ + in + ‘optionKeyName’
若是搜索條件爲多字符能夠中間用空格隔開,返回包含過濾條件的數組。
<div v-for="user in users | filterBy 'Chrim' in 'name' 'nickname'" ></div>
也能夠將搜索字段放到一個數組中,當修改搜索字段時只需修改數組便可,無需修改 View 層。
var names = ['name', 'nickname'] <div v-for="user in users | filterBy 'Chrim' in names" ></div>
orderBy
返回排序後的數組。
過濾條件是:‘string || array || function’ + ‘order>0爲升序 || order < 0 爲降序’,order 默認爲 1, 即升序。
註釋:當傳入參數爲 string 或 array 的時候,其原理是用的 sort 函數,只不過 vue 提早在內部作了處理。
currency 過濾器的做用是將數字值轉換爲貨幣形式輸出。第一個參數爲 String 的貨幣符號,若是不輸入,則默認爲美圓符號;第二個參數爲 Number 的小數位,默認爲2。
注意:若是第一個參數採起默認形式,而須要第二個參數修改小數位,那麼第一個參數不可省略。
//默認狀況 {{ amount | currency}} //12345 => $12,345.00 //使用人民幣符號 {{ amount | currency '¥'}} //12345 => ¥12,345.00 //將小數位調整爲 3 位 {{ amount | currency '$' 3}} //12345 => $12,345.000
debounce 過濾器的做用是延遲處理器必定的時間執行。參數爲函數且必須,通常與 v-on 等指令結合使用;可選參數延遲時間,單位毫秒,默認爲 300 毫秒。
應用:一般在監聽用戶 input 事件時使用 debounce 過濾器,能夠防止頻繁調用方法。
<input @keyup='onKeyup | debounce 500'自定義過濾器
大多數狀況下內置的過濾器並不能知足咱們的需求,因此須要用到 自定義過濾器。其方法以下:
Vue 中有一個全局函數用於自定義過濾器:Vue.filter:
單個參數:實現將字符串反轉
Vue.filter('reverse', function (value) { return value.splite('').reverse().join(''); }) <span v-text='message | reverse'></span>
多參數
多參數之間用空格分隔
Vue.filter('wrap', function (value, begin, end) { return begin + value + end; }) <span v-text="message | wrap 'before' 'agter'"></span> //'hello' => 'before hello after'
雙向過濾器
上面的過濾器函數都是在 Model 數據輸出到 View 層以前進行數據轉化的,實際上 Vue.js 還支持把來自視圖(input 元素) 的值在寫回模型前進行轉化,即雙向過濾器。
Vue.filter(id, { //model -> viiew //read 函數可選 read: function(val) {}, //view -> model //write 函數將在數據被寫入 Model 以前調用 //兩個參數分別爲表達式的新值和舊值 write: function(newVal, oldVal) {} })
若是過濾器參數和沒有用引號包起來,則它會在 vm 做用域內動態計算。此外,過濾器函數的 this 始終指向調用它的 vm。
<input v-model='userInput'> <span>{{ msg | contact userInput}}</span> <!-- 此處過濾器接受的參數 userInput 根據用戶輸入動態計算 --> Vue.filter('concat', function (value, input) { return value + input })
給過濾器一個惟一標識
若是用戶自定義的過濾器與內置過濾器衝突,那麼內置過濾器會被覆蓋;若是後註冊的過濾器與以前的過濾器衝突,則以前註冊的過濾器會被覆蓋。
過濾器函數須要有返回值
過濾器函數的做用是輸入表達式的值,通過處理後輸出。所以,定義的函數最好能夠返回有意義的值。函數沒有 return 語句不會報錯,但這樣的過濾器沒有意義。
在使用 filterBy 或 orderBy 對錶達式進行過濾時,若是同時須要將 $index
做爲參數,此時的 $index
將會根據表達式數組或對象過濾後的值進行索引。
<ul id="example"> <li v-for="item in items | order 'age'">{{ item.message}} - {{ $index }}</li> </ul> var example = new Vue({ el: '#example', data: { items: [ { message: '順風車', age: 2}, { message: '出租車', age: 10}, { message: '快車', age: 6} ] } }) //最終顯示順序爲:順風車-0、快車-0、出租車-2
即索引爲返回的新數組的索引。
自定義 filter 既能夠寫在全局的 Vue 下,也能夠寫在實例當中。可是須要注意的是,當寫在全局 Vue 中時,要寫在實例化 Vue 對象以前,不然不起做用。
全局 Vue
Vue.filter('reverse', function(value){ return value.split('').reverse.join(''); })
實例中
var demo = new Vue({ el: '#demo', data: {}, filters: { reverse: function (value){ return value.split('').reverse.join(''); } } })