<!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];
Logo

前往低代码交流专区

更多推荐