第一步:添加一个filters.js文件
import Vue from "vue";
import moment from "moment";
// 格式化日期时间
Vue.filter("formatTime",function(value,category){
if(!value) return "";
if(category == "DD"){
return moment(value).format("YYYY-MM-DD");
}else{
return moment(value).format("YYYY-MM-DD HH:mm:ss");
}
})
第二步:在main.js文件中引用filters.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import Echarts from "echarts";
import "./assets/css/index.css";
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
import "./filters.js"; // global filters
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
第三步;在相应的转换处使用
<template>
<div>
<ul>
<li v-for="(item,index) in list" :key="index">
<div>{{item.name}}</div>
<div>{{item.createdAt | formatTime}}</div>
<div>{{item.createName}}</div>
<div>{{item.type}}</div>
</li>
</ul>
<ul>
<li v-for="(item,index) in list" :key="index">
<div>{{item.name}}</div>
<div>{{item.createdAt | formatTime("DD")}}</div>
<div>{{item.createName}}</div>
<div>{{item.type}}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{
name:"南沙区合兴工业园三维数据",
createdAt:"2019-07-11T05:21:16.452Z",
createName:"赵丹",
type:"南沙区"
},
{
name:"南沙区九比小学三维数据",
createdAt:"2019-03-28T01:11:19.452Z",
createName:"李宁",
type:"南沙区"
}
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
效果如下: