【vue-vant】van-field 、van-datetime-picker、van-switch-cell组件的使用

一、效果图：

二、实现：

1.首先添加组件：

然后再在组件中添加、这两个组件

2.添加data值

  checked: true,
      startTime: "",
      endTime: "",
      showone: false,
      showtwo: false,
      minHour: 10,
      maxHour: 20,
      endTimePop: "",
      start_Time: "",
      end_Time: "",
      currentDate_end: "",
      currentDate_first: "",
      endTimePop: false,
      // end_Time:ture
      newendtime:true

3.设置方法

showPopupone() {
      this.showone = true;
    },
    showPopuptwo() {
      this.showtwo = true;
    },
    firstTimeChange(e) {
      let endTimeArr = e.getValues();
      this.start_Time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}  ${
        endTimeArr[3]
      }:${endTimeArr[4]}:00`;
    },

三、的使用

（1）这个时候主要用到了change()方法

（2）设置data值

（3)方法

（4）在结束时间，加上个v-show。

（5）之后，再在方法进行调用。