vue时分选择器结束时间大于开始时间

在Vue中，创建一个时分选择器组件并确保结束时间总比开始时间大是一个常见的需求。你可以通过监听用户输入事件，并在提交数据之前检查这两个时间字段是否满足条件。下面是一种简单的实现思路：

1. 定义一个自定义的时间选择器组件，例如`TimeRangePicker.vue`：

<template>
  <div>
    <input type="text" v-model="startTime" placeholder="开始时间">
    <input type="text" v-model="endTime" placeholder="结束时间">
    <button @click="checkAndSet">设置</button>
    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      error: '',
    };
  },
  methods: {
    checkAndSet() {
      if (new Date(this.endTime) <= new Date(this.startTime)) {
        this.error = '结束时间不得早于开始时间';
      } else {
        this.error = '';
        // 提交处理...
      }
    },
  },
};
</script>

在这个例子中，当用户点击“设置”按钮时，会检查`endTime`是否晚于`startTime`。如果不符合，会在错误消息区域显示一条提示。