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

相关阅读:
【日常计算机问题】win11、win10解决公共WiFi认证不弹出的问题。电脑没有弹出认证界面。以广州图书馆i-guangdong；i广东为例
vue/cli不同版本差异
基于SpringBoot的餐饮点餐系统+95009（免费领源码）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、全套文案
算法金 | Python 中有没有所谓的 main 函数？为什么？
MCE | 癌相关基因 ALK 参与胖瘦调节
蓝桥杯集训·每日一题2024 （差分）
提升B端图表设计技能：教程分享
linux字体安装
idea导入maven项目依赖报错
ubuntu下Anaconda环境安装GPU的pytorch(docker镜像)

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