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, init

CongJiYong

659人浏览 · 2021-12-23 20:04:09

CongJiYong · 2021-12-23 20:04:09 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^