vue项目中引入moment依赖方式(配置显示年月日时间格式)
时间格式效果展示: 2022-05-04
操作步骤:
一. 在项目根目录下, 下载moment依赖
下载命令
npm i moment
二. 在想要引入的.vue文件下,进行引入
在scripti标签中引入moment
import moment from "moment"
三. 在script标签中配置过滤器filters中的函数addProduct
注: 过滤器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>
每天进步一点点, 加油!
