前端VUE3.0,DAY22，过滤器使用

最新推荐文章于 2024-03-01 10:20:21 发布

疯子的梦想＠

最新推荐文章于 2024-03-01 10:20:21 发布

阅读量359

点赞数 1

分类专栏：前端文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120017602

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY22

过滤器

1.过滤器功能是对要显示的数据进行特定格式化后在显示。
2.注意的是，并没有改变原本的数据，是产生新的对应的数据。

格式化时间显示案例计算属性实现

在网页按F12，在console中输入new Date().getTime()即可获取当前的时间戳，是毫秒的时间戳。
在这里插入图片描述
打开BootCDN网站下载处理时间和日期的js库。

点复制链接后到浏览器地址栏粘贴。
在这里插入图片描述
然后按CTRL+S进行保存，此处保存到了案例文件夹下，保存格式是js格式。

详细的用法可看官网文档或者github仓库等
在这里插入图片描述

切换为简体中文。查看使用方法。

在代码中引入dayjs文件，并调用其中的处理函数。计算属性实现

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
    <!--引入时间处理js文件-->
    <script type="text/javascript" src="../dayjs.min.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div class="root">
        <h1>显示格式化后的时间:{{fmtTime}}</h1>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data() {
                return {
                    time: 1630392758094
                }
            },
            //计算属性实现
            computed: {
                fmtTime() {
                    //把上边的代码中的time时间戳传进dayjs的括号中
                    //不传的话，就默认以当前代码执行的时间来处理
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

过滤器实现

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
    <!--引入时间处理js文件-->
    <script type="text/javascript" src="../dayjs.min.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div class="root">
        <h1>显示格式化后的时间:{{fmtTime}}</h1>
        <!--过滤器实现，起个名字叫GuoLvQi-->
        <h1> 现在是:{{time | GuoLvQi}}</h1>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data() {
                return {
                    time: 1630392758094
                }
            },
            //计算属性实现
            computed: {
                fmtTime() {
                    //把上边的代码中的time时间戳传进dayjs的括号中
                    //不传的话，就默认以当前代码执行的时间来处理
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            //过滤器实现
            filters: {
                //拿到time数据，使用GuoLvQi函数进行处理，然后处理后的结果整个替换掉双中括号内的内容
                GuoLvQi(value) {
                    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

疯子的梦想＠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY22，过滤器使用

VUE3.0,DAY22过滤器格式化时间显示案例计算属性实现过滤器实现过滤器1.过滤器功能是对要显示的数据进行特定格式化后在显示。2.注意的是，并没有改变原本的数据，是产生新的对应的数据。格式化时间显示案例计算属性实现在网页按F12，在console中输入new Date().getTime()即可获取当前的时间戳，是毫秒的时间戳。打开BootCDN网站下载处理时间和日期的js库。点复制链接后到浏览器地址栏粘贴。然后按CTRL+S进行保存，此处保存到了案例文件夹下，保存格式是js格式
复制链接

扫一扫

专栏目录