vue转换时间格式的过滤器

问题背景

既然是做系统,通常都离不开时间的装换,今天遇到的这个功能是做个vueformatDate 时间转换filter 过滤器
需求如下:

  • 提前封装好过滤器formatDate
  • data里面定义 date: new Date()
  • 直接template可以使用 {{date|formatDate(this)}}

解决方案

效果展示
在这里插入图片描述
核心代码

methods:{
            setZero(a) {//设置小于10的数字在加0
                return a < 10 ? "0" + a : a;
            },
},
filters:{
 	//zhengkai.blog.csdn.net
 	//格式化当前时间
     formatDate(date,vm) { 
         let str = "";
         let weekDay = [
             "星期天",
             "星期一",
             "星期二",
             "星期三",
             "星期四",
             "星期五",
             "星期六"
         ];
         str += vm.setZero(date.getFullYear()) + "年"; //获取年份
         str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
         str += vm.setZero(date.getDate()) + "日"; //获取日
         str += " " + weekDay[date.getDay()]; //获取星期
         //如果需要具体到时分秒请加上以下内容:
         /*str += " " + vm.setZero(date.getHours()) + ":"; //获取时
         str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
         str += vm.setZero(date.getSeconds()); //获取秒*/
         return str;
     }
 }

所有代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TFS</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>今日招标信息 {{date|formatDate(this)}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 10" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div>
    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: function() {
            return {
                date: new Date(),
            }
        },
        methods:{
            setZero(a) {//设置小于10的数字在加0
                return a < 10 ? "0" + a : a;
            },
        },
        filters:{
        	//zhengkai.blog.csdn.net
        	//格式化当前时间
            formatDate(date,vm) { 
                let str = "";	
                //如果需要星期请加上
                let weekDay = [
                    "星期天",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六"
                ];
                str += vm.setZero(date.getFullYear()) + "年"; //获取年份
                str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
                str += vm.setZero(date.getDate()) + "日"; //获取日
                str += " " + weekDay[date.getDay()]; //获取星期
                //如果需要具体到时分秒请加上以下内容:
                /*str += " " + vm.setZero(date.getHours()) + ":"; //获取时
                str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
                str += vm.setZero(date.getSeconds()); //获取秒*/
                return str;
            }
        }
    })
</script>
</html>
已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页