vant 选择开始时间和结束时间

Vant是一个轻量级的移动端Vue组件库，其中包含了一个名为`van-time-picker`的时间选择器组件，可以用于选取开始时间和结束时间。使用Vant的时间选择器，你可以创建如下的HTML结构：

<template>
  <van-time-picker v-model="timeRange" @change="handleTimeChange"></van-time-picker>
</template>

<script>
import { TimePicker } from 'vant';

export default {
  components: {
    VanTimePicker: TimePicker,
  },
  data() {
    return {
      timeRange: ['', ''], // 两个空字符串表示开始和结束时间都未选择
    };
  },
  methods: {
    handleTimeChange(newTime) {
      this.timeRange = [newTime.start, newTime.end]; // 改变数据模型，更新显示的时间范围
    },
  },
};
</script>

在这个例子中，`v-model="timeRange"`绑定到数据属性`timeRange`，它会被设置为两个字符串，分别表示开始时间和结束时间。`@change="handleTimeChange"`监听时间选择的变化，当用户选择新的时间时，会触发`handleTimeChange`方法并更新`timeRange`。