1、vue過濾器簡介
vue過濾器就是用來過濾模型資料，在顯示之前進行資料處理和篩選。
2、vue過濾器文法
文法：{{ data | filter1(參數) | filter2(參數) }}
3、vue内置過濾器
vue1.0中有很多過濾器，例如currency，uppercase，lowercase，limitBy，orderBy，filterBy
vue2.0中已經删除了所有内置過濾器，全部被廢除。如何解決？
1）使用第三方工具庫
如：loadash庫、date-fns庫（日期格式化）、accounting.js（對貨币格式化）等
2）使用自定義過濾器
4、自定義過濾器
分類：全局過濾器，局部過濾器
4.1 自定義全局過濾器
文法：使用全局方法Vue.filter(過濾器ID，過濾器函數)，過濾器寫在window.onload=function(){ new Vue...}的外面。
4.2 自定義局部過濾器
文法：使用全局方法filters:{過濾器ID:(過濾器參數1，過濾器參數2...)=>{函數回調}}，過濾器寫在new Vue裡面。
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 3 <head>
4 4 <meta charset="UTF-8">
5 5 <title>自定義過濾器</title>
6 6 <!-- 引入vue-->
7 7 <script src="../vue/vue.js"></script>
8 8 <script>
9 9 //自定義全局過濾器，将小于10的數字十位補0
10 10 Vue.filter('addZero',function(data){
11 11 console.log(data)
12 12 return data<10?'0'+data:data //如果data小于10，給十位補0，否則傳回data
13 13 });
14 14 //自定義全局過濾器，将時間戳顯示成年月日時分秒
15 15 Vue.filter('date',data=>{
16 16 let d = new Date(data);
17 17 return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
18 18 })
19 19 window.onload=function(){
20 20 new Vue({
21 21 el:'#hello',
22 22 //data用來存儲資料
23 23 data:{
24 24 currentTime:Date.now()
25 25 },
26 26 //methods用來存儲方法
27 27 methods:{
28 28
29 29 },
30 30 //自定義局部過濾器，将數字保留3位小數
31 31 filters:{
32 32 number:(data,n)=>{
33 33 //console.log(data,n)
34 34 return data.toFixed(n)
35 35 }
36 36 }
37 37 })
38 38 }
39 39 </script>
40 40 </head>
41 41 <body>
42 42 <div id="hello">
43 43 <!-- 将小于10的數字十位補0 -->
44 44 <h3>{{8|addZero}}</h3>
45 45 <!-- 将數字保留3位小數 -->
46 46 <h3>{{12.3456789|number(3)}}</h3>
47 47 <!-- 将時間戳顯示成年月日時分秒 -->
48 48 <h3>{{currentTime|date}}</h3>
49 49 </div>
50 50 </body>
51 51 </html> ![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)