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

一、效果图：

二、实现：

1.首先添加组件：

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

然后再在组件中添加<van-popup>、<van-datetime>这两个组件

 <van-popup v-model="showone" position="bottom" :overlay="true">
        <van-datetime-picker
          v-model="currentDate_end"
          type="datetime"
          @cancel="showone =false"
          @confirm="showone=false"
          @change="firstTimeChange"
        />
      </van-popup>

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`;
    },

三、<van-switch-cell>的使用

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

（2）设置data值

（3)方法

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

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