vue时间今日开始时间结束时间

在Vue.js中，如果你想显示从今天开始到某个特定时间的时间范围，可以使用`v-bind`指令结合JavaScript的日期操作来实现。假设你想让用户选择一个结束时间并显示自今天起至该时间的区间，你可以创建两个数据属性，分别代表开始时间和默认结束时间（例如今天的午夜），然后使用`v-model`绑定用户的选择。

这是一个简单的示例：

<template>
  <div>
    <input type="datetime-local" v-model="startTime" placeholder="开始时间">
    <input type="datetime-local" v-model="endTime" placeholder="结束时间 (默认至今日午夜)">
    <p>时间范围：{{ startTime }} - {{ getRelativeTimeRange() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: new Date(),
      endTime: this.startTime,
    };
  },
  methods: {
    getRelativeTimeRange() {
      const now = new Date();
      if (now >= this.endTime) {
        return `${this.formatDate(this.endTime)} 至 ${this.formatDate(now)}`;
      } else {
        return `${this.formatDate(now)} 至 ${this.formatDate(this.endTime)}`;
      }
    },
    formatDate(date) {
      // 格式化日期，如：YYYY-MM-DDTHH:mm
      return date.toISOString().split('T')[0];
    },
  },
};
</script>

在这个例子中，用户输入的`startTime`会立即更新开始时间框，而默认的`endTime`初始设置为`startTime`，当用户改变`endTime`时，`getRelativeTimeRange`方法会被调用，计算出两个时间之间的相对区间并显示在页面上。