黑马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 }) */