vue设置金额和时间格式(团购倒计时下次一定)

需要加载一个插件(时间插件)

<template>
  <div>
    <div>
      <h3>过滤时间</h3>
      <h3>组键内的金额格式过滤</h3>
      <p>{{ money | moneyFormat }}</p>
      <p>{{ page | moneyFormat }}</p>
      <h3>全局设定的金额格式过滤</h3>
      <p>{{ money | QmoneyFormat }}</p>
      <p>{{ page | QmoneyFormat }}</p>
      <h3>时间</h3>
      <p>{{ time }}</p>
      <p>{{ time | timeFormat }}</p>
      <p>{{ time | timeFormat("YYYY-MM-DD") }}</p>
      <p>{{ time | timeFormat("HH-mm-ss") }}</p>
      <p>{{ time | timeFormat("HH:mm:ss") }}</p>
      <p>{{ time | timeFormat1 }}</p>
      <p>{{ time | timeFormat2 }}</p>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "TestFilter",
  data() {
    return {
      money: 23456,
      page: 999.999,
      time: new Date(),
    };
  },
  //   其他渲染完成才进行  mounted()
  //  setInterval(() => {}, 1000);
  mounted() {
    setInterval(() => {
      this.time = new Date();
    }, 1000);
  },
  filters: {
    moneyFormat(value) {
      //   保留两位小数
      return "¥" + Number(value).toFixed(2);
    },
    timeFormat(value, format = "YYYY-MM-DD HH:mm:ss") {
      return moment(value).format(format);
    },
    timeFormat1(value, format = "YYYY-MM-DD HH:mm") {
      return moment(value).format(format);
    },
    timeFormat2(value, format = "MM-DD HH:mm") {
      return moment(value).format(format);
    },
  },
};
</script>

<style>
</style>

main.js设置全局

import Vue from 'vue'; // 默认去node_modules文件目录去找到这个vue
import App from './App.vue'; // 这个就是src目录下的App.vue

// 没输入等于开发模式
// 开发模式等于【Vue.config.productionTip = true】
// 生产模式【Vue.config.productionTip = false】
Vue.config.productionTip = true

// 全局格式化金额
Vue.filter('QmoneyFormat', (value) => { 
    return "¥" + Number(value).toFixed(4) });

// 全局注册自定义指令
Vue.directive('upper-word', (el, binding) => {
    console.log(el, binding);
    el.textContent = binding.value.toUpperCase();
});


new Vue({ render: h => h(App), }).$mount('#app')