vue.js基礎之 過濾器詳解

過濾器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 過濾器

用於將字符串的值轉換爲 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 過濾器

currency 過濾器的做用是將數字值轉換爲貨幣形式輸出。第一個參數爲 String 的貨幣符號,若是不輸入,則默認爲美圓符號;第二個參數爲 Number 的小數位,默認爲2。

注意:若是第一個參數採起默認形式,而須要第二個參數修改小數位,那麼第一個參數不可省略。

//默認狀況
{{ amount | currency}}  //12345 => $12,345.00

//使用人民幣符號
{{ amount | currency '¥'}}  //12345 => ¥12,345.00

//將小數位調整爲 3 位
{{ amount | currency '$' 3}}  //12345 => $12,345.000

debounse 過濾器

debounce 過濾器的做用是延遲處理器必定的時間執行。參數爲函數且必須,通常與 v-on 等指令結合使用;可選參數延遲時間,單位毫秒,默認爲 300 毫秒。

應用:一般在監聽用戶 input 事件時使用 debounce 過濾器,能夠防止頻繁調用方法。

<input @keyup='onKeyup | debounce 500'
自定義過濾器

大多數狀況下內置的過濾器並不能知足咱們的需求,因此須要用到 自定義過濾器。其方法以下:

filter 語法

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 的索引

在使用 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 的書寫位置

自定義 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('');
		}
	}
})
相關文章
相關標籤/搜索