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>

vue转换时间格式的过滤器

问题背景

解决方案

猜你喜欢