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>
