Vue,过滤器的了解和使用

定义：对需要显示的数据进行格式化之后进行呈现。
语法：
（1）全局的实现方式：Vue.filter(name,callback)
（2）局部的实现方式：new Vue{filters:{}}
使用方式：
（1）{{ xxx | 过滤器名}}
（2） v-bind:属性 = “xxx | 过滤器名”
过滤在使用的时候需要注意：
（1）过滤器也可以接收额外参数、多个过滤器也可以串联。例如：

过滤器可以实现传参的方式：{{time | timeFormater(‘YYYY_MM_DD’) | mySlice}}

，在这里，time传给 timeFormater(‘YYYY_MM_DD’) ，接着 timeFormater(‘YYYY_MM_DD’)的返回值传给mySlice，在这里“|”指的是管道的意思。
（2）过滤器不会改变原本的数据，只是对原本的数据进行过滤，产生新的数据并且返回。

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>过滤器</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
                  <script type="text/javascript" src="../vue_js/dayjs.min.js"></script>
</head>

<body>
                  <div id="root">
                                    <h1>此时的时间戳是{{time}}</h1>
                                    <h1>利用计算属性实现：{{computedTime}}</h1>
                                    <h1>利用method实现:{{getFmtTime()}}</h1>
                                    <h1>过滤器实现：{{time | timeFormater}}</h1>
                                    <h1>过滤器可以实现传参的方式：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h1>
                                    <h1 :x="msg | mySlice">无极生太极，太极生两仪</h1>
                  </div>
                  <script>
                                    Vue.config.productionTip = false
                                    //全局过滤器
                                    Vue.filter('mySlice', function (value) {
                                                      return value.slice(0, 4)
                                    })
                                    const vm = new Vue({
                                                      el: '#root',
                                                      data: {
                                                                        msg: '我爱中国，！！！！',
                                                                        time: 1663142688108
                                                      },
                                                      computed: {
                                                                        computedTime() {
                                                                                          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
                                                                        }
                                                      },
                                                      methods: {
                                                                        getFmtTime() {
                                                                                          return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                                                                        }
                                                      },
                                                      //局部过滤器
                                                      filters: {
                                                                        timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                                                                                          return dayjs(value).format(str)
                                                                        }
                                                      }
                                    })

                  </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

相关阅读:
linux uname详解 -s -r -a 查看内核版本
Python算法图解——递归（一）：打印从1循环到10
dbImageSDK 高速数字图像处理
Word文档里面如何给内容进行注释添加
【使用typedef将复杂的block定义简化 Objective-C语言】
【JAVA-Day32】精通Java函数：定义、调用和主函数的完整指南
一个实际工作中的sql的模拟
WPS Word自动编号转文本
vue前端密码加密，springboot后端密码解密
C与C++中的常用符号与标点用法详解及实例

原文地址：https://blog.csdn.net/weixin_43228946/article/details/126856564