黑馬vue---31-3二、vue過濾器實例

黑馬vue---31-3二、vue過濾器實例

1、總結

一句話總結：

vue內部的東西，不管是過濾器仍是組件，都是鍵值對的方式

 

一、過濾器的定義語法？

Vue.filter('過濾器的名稱', function(){})

 

二、過濾器中的 function ，第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據？

Vue.filter('過濾器的名稱', function (data) { return data + '123' })

 

 

2、vue過濾器實例

一、全局過濾器

 1     // 全局的過濾器， 進行時間的格式化
 2     // 所謂的全局過濾器，就是全部的VM實例都共享的
 3     Vue.filter('dateFormat', function (dateStr, pattern = "") {
 4       // 根據給定的時間字符串，獲得特定的時間
 5       var dt = new Date(dateStr)
 6 
 7       //   yyyy-mm-dd
 8       var y = dt.getFullYear()
 9       var m = dt.getMonth() + 1
10       var d = dt.getDate()
11 
12       // return y + '-' + m + '-' + d
13 
14 
15 
16       if (pattern.toLowerCase() === 'yyyy-mm-dd') {
17         return `${y}-${m}-${d}`
18       } else {
19         var hh = dt.getHours()
20         var mm = dt.getMinutes()
21         var ss = dt.getSeconds()
22 
23         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
24       }
25     })

 

 

 

二、局部過濾器

 1     // 如何自定義一個私有的過濾器（局部）
 2     var vm2 = new Vue({
 3       el: '#app2',
 4       data: {
 5         dt: new Date()
 6       },
 7       methods: {},
 8       filters: { // 定義私有過濾器    過濾器有兩個 條件  【過濾器名稱 和 處理函數】
 9         // 過濾器調用的時候，採用的是就近原則，若是私有過濾器和全局過濾器名稱一致了，這時候 優先調用私有過濾器
10         dateFormat: function (dateStr, pattern = '') {
11           // 根據給定的時間字符串，獲得特定的時間
12           var dt = new Date(dateStr)
13 
14           //   yyyy-mm-dd
15           var y = dt.getFullYear()
16           var m = (dt.getMonth() + 1).toString().padStart(2, '0')
17           var d = dt.getDate().toString().padStart(2, '0')
18 
19           if (pattern.toLowerCase() === 'yyyy-mm-dd') {
20             return `${y}-${m}-${d}`
21           } else {
22             var hh = dt.getHours().toString().padStart(2, '0')
23             var mm = dt.getMinutes().toString().padStart(2, '0')
24             var ss = dt.getSeconds().toString().padStart(2, '0')
25 
26             return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
27           }
28         }
29       },
30       directives: { // 自定義私有指令
31         'fontweight': { // 設置字體粗細的
32           bind: function (el, binding) {
33             el.style.fontWeight = binding.value
34           }
35         },
36         'fontsize': function (el, binding) { // 注意：這個 function 等同於 把 代碼寫到了 bind 和 update 中去
37           el.style.fontSize = parseInt(binding.value) + 'px'
38         }
39       }
40     })
41 
42 
43     // 過濾器的定義語法
44     // Vue.filter('過濾器的名稱', function(){})
45 
46     // 過濾器中的 function ，第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據
47     /* Vue.filter('過濾器的名稱', function (data) {
48       return data + '123'
49     }) */