黑马vue---31-32、vue过滤器实例
黑马vue---31-32、vue过滤器实例
一、总结
一句话总结:
vue内部的东西,无论是过滤器还是组件,都是键值对的方式
1、过滤器的定义语法?
Vue.filter('过滤器的名称', function(){})
2、过滤器中的 function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据?
Vue.filter('过滤器的名称', function (data) { return data + '123' })
二、vue过滤器实例
1、全局过滤器
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 })
2、局部过滤器
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 }) */