1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p>{{ msg | msgFormat('mia ', 'san ') | test }}</p> 11 </div> 12 13 <div id="app2"> 14 <p>{{ dt | dateFormat('') }}</p> 15 </div> 16 <script> 17 // 定义一个Vue全局过滤器，名字叫 msgFormat 18 Vue.filter('msgFormat',function (msg, arg, arg2) { 19 //字符串的replace方法，第一个参数可以是 字符串/正则，g就是全局 20 return msg.replace(/aaaaa/g, arg + arg2) 21 }); 22 //可以定义多个 23 Vue.filter('test', function (msg) { 24 return msg + ' mia' 25 }); 26 27 // 创建 Vue 实例，得到 ViewModel 28 var vm = new Vue({ 29 el: '#app', 30 data: { 31 msg:"Bayern aaaaa" 32 }, 33 methods: { 34 35 } 36 }); 37 38 39 //定义私有的过滤器 40 var vm2 = new Vue({ 41 el: '#app2', 42 data: { 43 dt:new Date() 44 }, 45 methods: { 46 47 }, 48 //过滤器，方法都是对象 49 //过滤器调用采用就近原则，如果全局和私有的名称一致了，优先调用私有的过滤器 50 filters: { 51 dateFormat: function (dateStr, pattern = '') { 52 var dt = new Date(dateStr); 53 54 var y = dt.getFullYear(); 55 var m = dt.getMonth() + 1; 56 var d = dt.getDate(); 57 58 59 if (pattern.toLowerCase() === 'yyyy-mm-dd') { 60 return `${y}-${m}-${d}`; 61 } else { 62 var hh = dt.getHours(); 63 var mm = dt.getMinutes(); 64 var ss = dt.getSeconds(); 65 66 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; 67 68 } 69 } 70 } 71 }) 72 </script> 73 74 </body> 75 </html>
