vue typescript 显示今天的日期

在Vue.js中结合TypeScript，你可以创建一个组件并显示当前日期。首先，你需要安装`vue-class-component`和`vue-property-decorator`这两个库来增强TypeScript支持，然后可以使用`moment.js`或者`date-fns`等库来处理日期。

1. 安装依赖：

npm install vue-class-component vue-property-decorator moment
# 或者
yarn add vue-class-component vue-property-decorator moment

2. 创建一个日期组件（假设名为`TodayDate.vue`）：

import { Component, Prop } from 'vue-property-decorator';
import moment from 'moment';

@Component({
  template: `
    <div>
      <h1>今天日期：{{ todayDate }}</h1>
    </div>
  `,
})
export default class TodayDate extends Vue {
  @Prop()
  format: string = 'YYYY-MM-DD'; // 可以自定义格式，默认为YYYY-MM-DD

  get todayDate() {
    return moment().format(this.format);
  }
}

在这个组件里，我们定义了一个计算属性`todayDate`，它会实时获取当前日期，并根据`format`属性（如果传入）格式化展示。

使用这个组件时，在父组件中像下面一样实例化：

<template>
  <TodayDate :format="customFormat" />
</template>

<script lang="ts">
import TodayDate from './TodayDate.vue';

export default {
  components: {
    TodayDate,
  },
  data() {
    return {
      customFormat: 'MM/DD/YYYY', // 自定义日期格式
    };
  },
};
</script>