vue中的過濾器是對要顯示的數據進行特定格式化后進行顯示。比如最常用的保留兩位小數，我們就可以用過濾器實現，它并沒有改變原始數據的值，只是通過新的方式顯示出來。功能類似于angular中的管道。
對于過濾器要知道兩點
1.對要顯示的數據進行特定格式化后再顯示。
2.并沒有改變原本的數據，只是用新的數據進行顯示。
3.過濾器的本質就是一個函數
0.簡單的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="root">
<h3>格式化前的時間{{time}}</h3>
<h3>格式化后的時間{{time | timeFormat }}</h3>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
time:new Date().getTime() //獲取時間戳
},
//過濾器
filters:{
timeFormat(value){
//value值就是 ‘|’ 的值,return 會直接替換掉原來的值
console.log(value)
return moment(value).format("YYYY-MM-DD")
}
}
})
</script>
</body>
</html>
效果如下：
上方所謂的過濾器就是 {{ time | timeFormat}} 這一部分，主要是“|” 這個符號解析的，vue讀取的時候，先將“|” 符號前的time 作為傳遞到 timeFormat這個函數中，這個函數調用了momentjs對時間進行了格式化然后返回到頁面中進行展示。
當然這個也支持自定義參數格式，也就是你的時間格式化的結果 不一定只有一種，可能有很多種。
2.組合用法
過濾器可以多個連在一起用，類似{{ time | timeFormat | str1 | str2 }} 這種，原則上可以無限套娃，但是實際開發中用的并不多，最多用過兩層。
舉例來說，上面的我們格式化時間后假如只想截取前幾位，那么可以用字符串截取函數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="root">
<h3>格式化前的時間{{time}}</h3>
<h3>格式化后的時間{{time | timeFormat }}</h3>
<h3>格式化前的字符串{{str}}</h3>
<h3>格式化后的字符串{{str | mystr | mySlice}}</h3>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
time:new Date().getTime(), //獲取時間戳
str:"ni hao!"
},
//過濾器
filters:{
timeFormat(value){
//value值就是 ‘|’ 的值,return 會直接替換掉原來的值
console.log(value)
return moment(value).format("YYYY-MM-DD")
},
//字符串截取過濾器
mySlice(value){
console.log("mySlice",value)
return value.slice(0,3)
},
//字符串拼接過濾器
mystr(value){
console.log("mystr",value)
return value+"hello"
}
}
})
</script>
</body>
</html>
效果圖如下：
可以看出，字符按第一個過濾器執行的結果是 ni hao!hello
按照第二個過濾器執行的結果是hi