博客

vue项目中引入moment依赖方式(配置显示年月日时间格式)

时间格式效果展示

: 2022-05-04

操作步骤:

一. 在项目根目录下, 下载moment依赖

下载命令

npm i moment

二. 在想要引入的.vue文件下,进行引入

在scripti标签中引入moment

import moment from "moment"

三. 在script标签中配置过滤器filters中的函数dateFormat

注: 过滤器filters与与data同级, 用逗号隔开

export default{ 
	data(){
		return {
      		obj: {
        	time: new Date(""),
      	},
    };

	},
	filters:{
	// 格式化日期
	dateFormat(value){
		return moment(value).format("YYYY-MM-DD")
	}
}

四. 调用过滤器中的dateFormat

<template>
  <div>{{ time | dateFormat }}</div>
</template>

配置步骤已全部完成, 运行vue项目试试吧

完整vue代码参考:

<template>
  <div>{{ time | dateFormat }}</div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      obj: {
        time: new Date(""),
      },
    };
  },
  filters: {
    // 格式化日期
    dateFormat(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
  methods: {},
};
</script>

<style></style>

每天进步一点点, 加油!