vue過濾器
阿新 • • 發佈：2021-02-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ time }} <hr> {{ time | hehe(1, 2, 3) }} <hr> {{ time | timeFormat('/') }} <hr> {{ time | timeFormat('-') }} <hr> {{ time | timeFormat() }} </div> <script> new Vue({ el: '#app', data: { time: (new Date()).getTime() }, filters: { 'hehe': (data, a, b, c)=>{ // 必須return 流進去的東西 必須有流出 不然顯示空 return `data:${data} a:${a} b:${b} c:${c}` }, 'timeFormat': (time, tag)=> { console.log(time, tag) let tag1 = tag||'.' let y = (new Date(time)).getFullYear() let m = (new Date(time)).getMonth() + 1 let d = (new Date(time)).getDate() return `${y}${tag1}${m}${tag1}${d}` } } }) </script> <!-- 2021.26 2021.11.25 2021/11/25 時間戳 過濾器 對傳入的資料進行處理 全域性過濾器 Vue.filter('name', ()=> { template: '', components: '', filters: { 'name': ()=>{ } } }) 區域性過濾器 --> </body> </html>