Vue 過濾器
阿新 • • 發佈：2020-11-20
區域性過濾器
區域性過濾器定義在Vue例項的filters中，必須是一個函式，呼叫時使用|完成呼叫。
區域性過濾器只能由當前的Vue例項使用。
如下，對時間型別進行過濾：
<body> <div id="app"> {{currentTime | timeFormat}} </div> <script src="./vue.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> <script> const app = new Vue({ el: "#app", data: { currentTime: new Date(), }, filters: { timeFormat(value) { // value就是 | 左邊的值 return moment(value).format("YYYY-MM-DD HH:mm:ss"); } } }) </script> </body>
全域性過濾器
過濾器應當定義在filter中，且是一個函式，當要呼叫時使用|即可完成呼叫。
全域性過濾器可以由所有的的Vue例項使用。
<body> <div id="app"> {{currentTime | timeFormat}} </div> <script src="./vue.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> <script> Vue.filter("timeFormat",value=>{ // value就是 | 左邊的值 return moment(value).format("YYYY-MM-DD HH:mm:ss"); }) const app = new Vue({ el: "#app", data: { currentTime: new Date(), } }) </script> </body>
過濾器引數
過濾器函式中的第一個引數固定死為|左邊的值。
當我們有多個引數時，可以進行如下的傳遞方式，下面的示例將計算七天後的時間是多久：
<body> <div id="app"> {{currentTime | addTime(7,"days")}} </div> <script src="./vue.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> <script> const app = new Vue({ el: "#app", data: { currentTime: new Date(), }, filters: { addTime(value,...arg) { // value就是 | 左邊的值,arg是右邊的兩個值 return moment(value).add(...arg).format("YYYY-MM-DD HH:mm:ss"); } } }) </script> </body>