全局使用filters过滤器

全局使用过滤器

1、main.js文件

//main.js
import Vue from 'vue'
import App from './App'
import {
  getSwiperList,
  getGoodsDetail
} from "network/http.js"

Vue.prototype.$getSwiperList = getSwiperList //获取轮播图数据
Vue.prototype.$getGoodsDetail = getGoodsDetail //获取商品详情数据
Vue.filter("formatDate",date=>{
  const d=new Date(date)
  const year =d.getFullYear()
  const month=d.getMonth().toString().padStart(2,0)
  const day=d.getDay().toString().padStart(2,0)
  return year+"-"+month+"-"+day
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

2、detail组件

<template>
  <view class="detail">
    <view>
      <view class="time">{{ data.add_time | formatDate }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      data:{}
    };
  },
  /*这里再次使用filters是为了组件的复用到其他项目*/
  filters: {
    formatDate(date) {
     const d=new Date(date)
     const year =d.getFullYear()
     const month=d.getMonth().toString().padStart(2,0)
     const day=d.getDay().toString().padStart(2,0)
     return year+"-"+month+"-"+day
    }
  },
  methods: {
    async getGoodsDetail() {
      const res = await this.$getGoodsDetail();
      this.data = res.data.message;
      console.log(this.data)
    }
  },
  created() {this.getGoodsDetail()}
};
</script>
<style lang="scss" scoped></style>