Vue时间封装过滤器

CongJiYong

已于 2022-04-06 10:33:37 修改

阅读量638

点赞数

分类专栏： vue.js 文章标签： vue.js javascript ecmascript

于 2021-12-23 20:04:09 首次发布

本文链接：https://blog.csdn.net/CongJiYong/article/details/122115425

版权

vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建Dom元素 -->
    <div id="app">
        <ul>
            <li v-for="item in news" :key="item.id">
                <div>新闻标题:{{item.title}}</div>
                <div>发布时间:{{item.time | timeFilter('y-m-d h:i:s')}}</div>
                <div>发布时间:{{item.time | timeFilter('y/m/d h:i:s')}}</div>
                <div>发布时间:{{item.time | timeFilter('y-m-d')}}</div>
            </li>
        </ul>
    </div>
    <script>
        // 封装时间过滤器
        Vue.filter('timeFilter',(e,type)=>{
           let date  = new Date(e);
            //  年
            let y = date.getFullYear()
            //月
            let m = ((date.getMonth()+1)+'').padStart(2,'0');
            // 日
            let d = (date.getDate()+'').padStart(2,'0');
            // 时
            let h = (date.getHours()+'').padStart(2,'0');
            // 分
            let i = (date.getMinutes()+'').padStart(2,'0');
            // 秒
            let s = (date.getSeconds()+'').padStart(2,'0');
            if(type === 'y-m-d h:i:s'){
                return `${y}-${m}-${d} ${h}:${i}:${s}`
            }else if(type === 'y/m/d h:i:s'){
                return `${y}/${m}/${d} ${h}:${i}:${s}`
            }else{
                return `${y}-${m}-${d}`
            }
        })
        // 3.实例化vue
        new  Vue({
            el:'#app',
            data:{//属性
                news:[
                    {id:1,title:'世卫组织:2022年必须终止',time:1640159350000},
                    {id:2,title:'不管你在哪儿，我们都能给你来一针',time:1630159350000},
                    {id:3,title:'80余名特战队员在崇明',time:1640059350000},
                    {id:4,title:'果然,美国激光武器瞄准了中国',time:1610159350000},
                ]
            },
            methods:{//方法

            }
        })
    </script>
</body>
</html>

const month = new Date().getMonth(),year = new Date().getFullYear(),
    isLeapYear = year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
const monthDays = [31, isLeapYear ? 29 : 28, 31, 30, 31];
const days = monthDays[month];

CongJiYong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue时间封装过滤器

<!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>Doc
复制链接

扫一扫