如何使用vue過濾器filter
概述
在 vue2.0 之前，是有內建過濾器的，在2.0中已經沒有內建的過濾器了，但我們可以自定義過濾器。
關於 vue 過濾器，在官方文件中是這樣說明的：
Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 javascript 表示式的尾部，由“管道”符號指示。
即過濾器是用來格式化資料的一個函式。過濾器不會修改原始資料，它的作用是過濾資料，就是對資料進行加工處理並返回處理後的資料，比如做一些資料格式上的修改，狀態轉換等。
過濾器分為兩種
- 元件內的過濾器(元件內有效)
- 全域性過濾器(所有元件共享)
定義過濾器
第一個引數是過濾器的名字
第二個引數是過濾器的功能函式 (若不定義vue就不知道這個字串是什麼，有什麼作用)。
過濾器的功能函式
- 宣告 function(data,argv1,argv2...){}
- 第一個引數是傳入的要過濾的資料，即呼叫時管道符左邊的內容。
- 第二個引數開始往後就是呼叫過濾器的時候傳入的引數。
過濾器的使用
先註冊，後使用
元件內 filters:{ 過濾器名: fn } fn 內通過 return 返回最終的資料
全域性 Vue.filter('過濾器名',fn) fn 內通過 return 返回最終的資料
使用 {{ 資料 | 過濾器名 }}
// 使用過濾器時需要新增管道符號（ | ）作為分隔，管道符 | 右邊是過濾器名稱，即文字的功能函式
<!-- 在雙花括號中 -->
{{ message | 過濾器名稱 }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="id | 過濾器名稱"&g程式設計客棧t;</div>
自定義全域性過濾器
Vue.filter('過濾器名稱',function(val) { // val表示要被處理的資料
// 過濾器業務邏輯，要有返回值
})
<div>{{ msg | 過濾器名稱 }}</div>
<div v-bind="msg | 過濾器名稱"></div>區域性過濾器
data () {
return {
msg: 'hello world'
}
},//定義私用區域性過濾器。只能在當前 vue 物件中使用
filters: {
dataFormat: (msg,a) => { // msg表示要過濾的資料，a表示傳入的引數
return msg + a;
}
}
<p>{{ msg | dataFormat('!')}}</p> // 結果: hello world!
注意事項
1.全域性註冊時是 filter 沒有 s ， 而元件過濾器是 filters，是有 s 的，雖然寫的時候沒有 s 也不報錯，但是過濾器是沒有效果的。
2.當全域性過濾器和區域性過濾器名字重複的時候，會以就近原則進行呼叫，即：區域性過濾器優先於全域性過濾器被呼叫
3.一個表示式可以使用多個過濾器，其執行順序從左往右，前一個過濾器的結果作為後一個過濾器的被處理資料，所以要注意使用順序
熟悉 vue 的童鞋會知道，過濾器有時同methods、computed、watch一樣可以達到處理資料的目的，但又不能替代它們，因為它不能改變原始值。如果一個過濾器的內部特別複雜，可以考慮把它寫成一個計算屬性，因為計算屬性本身帶有快取，可複用性強，而過濾器一般用來做一些簡單的操作。
在實際開發中，全域性的過濾器要比www.cppcns.com區域性過濾器使用的更廣泛一些，說白了我們為什麼要使用過濾器，其實就跟使用函式是一樣，把一些方法封裝，供其它元件使用，這樣呼叫起來更方便也更快捷。
大家知道全域性過濾器是在 main.js 中定義的，但萬一專案過大，有多個過濾器，那 main.js 就一堆程式碼，為了專案模組化，最好是有專門的目錄來統一存放這些過濾器，然後把處理函式給抽離出去，放在一個.js檔案中，下邊通過示例程式碼展示。
示例一（區域性過濾器）
格式化時間或日期，補全指定位數，不足個位數補0
// filter/IXslTzgxRYindex.js檔案
export default {
dateFormat: value => {
const dt = new Date(value * 1000)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2,'0') // .padStart(指定位數，"要補全的符號或值")
const d = (dt.getDay() + '').padStart(2,'0')
const hh = (dt.getHours() + '').padStart(2,'0')
const mm = (dt.getMinutes() + '').padStart(2,'0')
const ss = (dt.getSeconds() + '').padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
// 在 .vue 檔案中使用區域性過濾器
<script>
import filters from '../filter'
export default {
... ...
filters: { ...filters },data() {
return {}
}
}
</script>
<div> 日期：{{ date | dateFormat }} </div>
示例二（全域性過濾器）
通用字典項的回顯：比如性別男女或通用選擇是否，後端傳給我們的資料是0、1，我們需要在頁面上顯示男女或是否
// constants/dictionary.js 檔案
export const GENDER_MENU = [
{ code: 0,label: '男'},{ code: 1,label: '女'}
];
export const COMMON_MENU = [
{ code: 0,label: '否'},label: '是'}
];
export default {
GENDER_MENU,COMMON_MENU
}
filter / dict.js 檔案
// filter/dict.js 檔案
import www.cppcns.comDict from '../constants/dictionary'
export const genderMenu = {
func: value => {
const target = Dict.GENDER_MENU.filter(item => {
return item.code = value;
})
return target.length ? target[0].label : value;
}
}
export const commonMenu = {
func: value => {
const target = Dict.COMMON_MENU.filter(item => {
return item.code = value;
})
return target.length ? target[0].label : value;
}
}
filter / index.js 檔案
// filter/index.js 檔案
import * as filters from './dict' // 匯入過濾函式
const Install = Vue => {
// 匯入的 filters 是一個物件，使用Object.keys()方法，得到一個由key組成的陣列，遍歷資料，讓key作為全域性過濾器的名字，後邊的是key對應的處理函式，這樣在任何一個元件中都可以使用全域性過濾器了
Object.keys(filters).forEach(key => {
Vue.filter(key,filters[key].func)
})
/*
for(const _filter in filte程式設計客棧rs) {
Vue.filter(`${_filter}`,filters[_filter].func)
} */
}
export default Install
main.js 檔案
// main.js 檔案 ... ... import filters from './../filter/index' Vue.use(filters) ... ...
在.vue 檔案中使用全域性過濾器
// .vue 檔案中使用全域性過濾器
<p>性別：{{ gender | genderMenu }}</p>
以上就是如何使用vue過濾器filter的詳細內容，更多關於vue過濾器filter的資料請關注我們其它相關文章！