vue界面，怎么实现提交的时候判断时间和人数是否超出，超出就无法报名。当前时间和报名人数实时获取

要实现实时获取当前时间和报名人数，需要使用Vue的计算属性和watch监听器。在模板中，使用v-model指令绑定表单输入，使用v-if指令根据条件控制元素的显示和隐藏。具体实现步骤如下：

1. 在data中定义变量存储当前时间和报名人数：

data() {
  return {
    currentTime: new Date(),
    enrollCount: 0,
    maxCount: 100, // 最大报名人数
    deadline: new Date('2021/12/31') // 报名截止时间
  }
}

2. 使用计算属性计算剩余时间和是否超过人数限制：

computed: {
  remainingTime() {
    const diff = this.deadline - this.currentTime;
    const days = Math.floor(diff / (24 * 60 * 60 * 1000));
    const hours = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    const minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
    const seconds = Math.floor((diff % (60 * 1000)) / 1000);
    return { days, hours, minutes, seconds };
  },
  isFull() {
    return this.enrollCount >= this.maxCount;
  },
  isExpired() {
    return this.currentTime > this.deadline;
  }
}

3. 在模板中使用v-model指令绑定表单输入，使用v-if指令根据条件控制元素的显示和隐藏：

<template>
  <form>
    <input v-model="name" type="text" placeholder="请输入姓名">
    <input v-model="phone" type="text" placeholder="请输入手机号">
    <button @click.prevent="submit" v-if="!isFull && !isExpired">提交报名</button>
    <p v-if="isFull">报名人数已满</p>
    <p v-if="isExpired">报名已结束</p>
    <p v-if="isFull || isExpired">剩余时间：{{ remainingTime.days }}天{{ remainingTime.hours }}小时{{ remainingTime.minutes }}分{{ remainingTime.seconds }}秒</p>
  </form>
</template>

4. 使用watch监听器实时更新当前时间：

watch: {
  currentTime() {
    this.currentTime = new Date();
  }
},
mounted() {
  setInterval(() => {
    this.currentTime = new Date();
  }, 1000);
}

5. 在submit方法中判断是否超出人数限制：

methods: {
  submit() {
    if (this.isFull) {
      alert('报名人数已满');
      return;
    }
    // 其他逻辑处理
    this.enrollCount++;
  }
}