Vue中的系統過濾器

2021-08-30 04:33:36 字數 2260 閱讀 1454

vue提供了一系列的固定邏輯來使程式設計師更加容易的實現這些功能，這些過濾器稱之為系統過濾器，vue也提供了乙個介面用來提供程式設計師定義屬於自己的特殊邏輯，vue稱之為自定義過濾器。

示例：}

2345 => $12,345.00

使用其它符號：

}


12345 => £12,345.00
一些貨幣使用3或4位小數，而一些貨幣不會，例如日元（¥)）、越南盾（₫）：

}


12345 => ₫12,345
如果只有乙個引數，複數形式只是簡單地在末尾新增乙個「s」。如果有多個引數，引數被當做乙個字串陣列，對應乙個、兩個、三個…複數詞。如果值的個數多於引數的個數，多出的使用最後乙個引數。

示例：

} }


1 => 『1 item』


2 => 『2 items』


}}
結果：

1 => 『1st』


2 => 『2nd』


3 => 『3rd』


4 => 『4th』


5 => 『5th』
輸出經json.stringify()處理後的結果，而不是輸出tostring()的結果（如[object object]）。

以四個空格的縮排列印乙個物件：

}
包裝處理器，讓它延遲執行xms，預設延遲300ms。包裝後的處理器在呼叫之後至少將延遲xms，如果在延遲結束前再次呼叫，延遲時長重置為xms。

用法：限制陣列為開始n個元素，n由第乙個引數指定。第二個引數是可選的，指定開始的偏移量。
用法：

返回過濾後的陣列。第乙個引數可以是字串或函式。如果第乙個引數是字串，則在每個陣列元素中搜尋它：

在上例中，只顯示包含字串hello的元素。如果item是乙個物件，過濾器將遞迴地在它所有屬性中搜尋。為了縮小搜尋範圍，可以指定乙個搜尋字段：

在上例中，過濾物件只在使用者物件的name屬性中搜尋jack。為了更好的效能，最好始終限制搜尋範圍。

上例中使用靜態引數，當然可以使用動態引數作為搜尋目標或搜尋字段。配合v-model我們可以輕鬆實現輸入提示效果：

new vue(,,]


}})
多鍵值搜尋：

使用乙個動態陣列進行多鍵值搜尋：
使用乙個使用者自定義的過濾器函式：

用法：返回排序後的陣列。你可以傳入多個鍵名。也可以傳入乙個陣列，此陣列包含排序的鍵名。如果你想使用自己的排序策略，可以傳入乙個函式。可選引數order決定結果公升序（order >= 0）或降序（order < 0）。

對於原始型別陣列，可以忽略sortkey，只提供排序，例如orderby 1。

按名字排序使用者：

降序：

原始值排序：

動態排序：

reverse sort order


new vue(, , ]


}})
使用兩個鍵排序：

使用函式排序：

由於系統過濾器的用法我在上面的文件中已經寫得很清楚了，所以說這裡就不用再進行分析了。

vue中過濾器

常用語文字的格式化,過濾器可用在兩個地方 雙括號插值和v bind 表帶式 用符號 表示,在雙括號的中 在 v bind 中 具體使用請參考vue官方文件 如果專案中使用的過濾器比較多,不妨單獨用乙個filter.js檔案用來專門寫過濾器,在main.js中新增如下 就可以將filter中過濾器全部...

vue元件中過濾器 Vue中如何使用過濾器

前言 vue中的過濾器可以格式化以及美化內容 從後台接受資料過來的時候時間是時間毫秒，我選擇了使用過濾器，接下來給大家分享一下使用過程 在全域性配置過濾器 main.js檔案裡面 時間過濾器 vue.filter datefilter function val datefileter是過濾器名 es...

Vue 過濾器案例（全域性過濾器和區域性過濾器）

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat，但是控制不同作用，乙個是全域性的...