vue点击按钮添加数据

解决思路：
1、分别将所有的起始时间和终止时间添加到两个数组中并排序（如果是日期格式将时间转为毫秒值，再添加到数组中）
2、然后通过循环对比区间

详见原博文地址
根据博文改编，该demo中的时间段是手写的下拉选择，类似下图

原博文中是把时间转为毫秒值，然后在进行对比，本demo中是只支持选择整点，所以对比的是小时，将起始和终止的小时值push到两个数组中再对比
直接上代码

//判断有没有重复的区间
  judgeSection(arr) {
        var startTimeArr = []
        var endTimeArr = []
        arr.map(function(item) {
            startTimeArr.push(item.startTime ? Number(item.startTime.substr(0,2)) : '')
            endTimeArr.push(item.endTime ? Number(item.endTime.substr(0,2)) : '')
        })
        var allStartTime = startTimeArr.sort((a,b) => a - b) // 排序
        var allEndTime = endTimeArr.sort((a,b) => a - b)
        var result = 0 // 判断时间是否有重复区间
        for (let k = 0; k < allStartTime.length; k++) {
            if (k > 0) {
                if (allStartTime[k] < allEndTime[k - 1]) {
                    result += 1
                }
            }
        }
        return result > 0
    },

原数组数据是

let arr = [{
      startTime: "08:00",
      endTime: "09:00",
  }, {
      startTime: "09:00",
      endTime: "12:00",
  }, {
      startTime: "12:00",
      endTime: "17:00",
  }]
  console.log(this.judgeSection(arr)) // 返回的结果为true表示有重复区间，false则表示没有