vue自定义私有过滤器

最新推荐文章于 2024-03-27 19:03:39 发布

小白学习日记

最新推荐文章于 2024-03-27 19:03:39 发布

阅读量316

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_46533814/article/details/122877716

版权

Vue 时间过滤器日期格式化私有过滤器 padDate

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

filters
自定义时间过滤器，获取自己想要的时间格式以显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间过滤</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{date | formatDate}}
</div>

<script>
    //在月份、日期、小时、小于10前面补0
    let padDate = function (value){
        return value < 10 ? '0' + value : value;
    }
    let app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        //私有过滤器
        filters: {
            formatDate: function (value){//这里的value就是需要过滤额数据
                let date = new Date(value);
                let year = date.getFullYear();
                let month = padDate(date.getMonth()+1);
                let day = padDate(date.getDate());
                let hours = padDate(date.getHours());
                let minutes = padDate(date.getMinutes());
                let seconds = padDate(date.getSeconds());
                //返回过滤后的数据
                return year + '-'+month + '-' + day + ' ' + hours
                + ':' + minutes + ':' + seconds;

            }
        },
        /*
        钩子函数：常用的有：
                created：实例创建完成后调用，此阶段完成了数据的观测等，
                但尚未挂载，$el还不可用，需要初始化处理一些数据时会比较有用
                mounted：el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
                beforeDestroy：实例销毁之前调用，主要解绑一些使用addEventListener监听的时间等
                这些钩子与el和data类似，也是作为可选项options写入Vue实例中，钩子的this指向的时调用它的Vue实例
         */
        mounted: function (){
            let _this = this;//声明一个变量指向Vue实例，保证作用域一致
            this._timer = setInterval(function (){
                _this.data = new Date();//修改数据date
            },1000);
        },
        beforeDestory: function (){
            if (this._timer){
                clearInterval(this._timer);
            }
        }
    })
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d8qO5NiT-1644552244351)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220210215137883.png)]$