vue转换时间格式的过滤器-蒲公英云

vue转换时间格式的过滤器

问题背景

既然是做系统，通常都离不开时间的装换，今天遇到的这个功能是做个vue 的 formatDate 时间转换的 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>