vue 如何取消点击事件

Question

如下，一个例子，摘抄自：
https://juejin.im/post/58d880...
90s内可点击按钮，90s后要求不可点击按钮，该如何实现？？

<template>
  <div>
    <h1>比赛时间{{time}}</h1>
    <h2>直播播报:{{result}}</h2>
    <div>
      <p>中国队进球数：{{team.china}}</p>
      <button @click="team.china++">点击中国队进一球</button>
      <p>韩国队进球数：{{team.korea}}</p>
      <button @click="team.korea++">点击韩国队进一球</button>
    </div>
  </div>
</template>

 <script>
import Vue from "vue";
export default {
  created() {
    let time = setInterval(() => {
      this.time++;
      if (this.time == 90) {
        clearInterval(time);
      }
    }, 1000);
  },
  data() {
    return {
      time: 0,
      team: {
        china: 0,
        korea: 0
      }
    };
  },
  computed: {
    result() {
      if (this.time < 90) {
        if (this.team.china > this.team.korea) {
          return "中国队领先";
        } else if (this.team.china < this.team.korea) {
          return "韩国队领先";
        } else {
          return "双方僵持";
        }
      } else {
       // Vue.off("click");
        if (this.team.china > this.team.korea) {
          return "中国队赢了";
        } else if (this.team.china < this.team.korea) {
          return "韩国队赢了";
        } else {
          return "平局";
        }
      }
    }
  }
};
</script>

Answer 1

点击事件那里使用你已经做好状态的变量为条件就行 @click="time < 90 && team.china++"
另外应该还要按钮颜色状态变为禁用吧？ 同样条件 设置disabled就好

Answer 2

增加一个状态吧，利用状态来控制事件的触发

Answer 3

这种写法纯粹为了让你直观看效果的简单写法...不要在@click=""里赋值...提取一个方法出来, 在方法里处理数据... 不想让点了在处理数据之前直接判断time return掉就可以了...