vue学习-过滤器

Posted 2022-03-30 monica4

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习-过滤器相关的知识，希望对你有一定的参考价值。

 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>

技术图片

以上是关于vue学习-过滤器的主要内容，如果未能解决你的问题，请参考以下文章