vue学习（2）-过滤器 

 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>

 

posted @ 2019-07-09 11:53  MonicaJIN  阅读(189)  评论(0)    收藏  举报