如何仅在使用 VueJS 悬停 div 时增加数字？

Question

我想创建一个复活节彩蛋，如果访问者将 his/her 鼠标放在文本块上五秒钟，就会触发该彩蛋。

这是我的代码：

<template>
 <!-- Some code -->
<div class="side-message" @mouseover="ee" @mouseleave="reset">
  <h1 v-if="easter" :class="easter ? 'ee' : ''">[ HYPE INTENSIFIES ]</h1>
  <p v-else v-html="replace($t('contact.intro'))"></p>
</div>
<!-- Rest of code -->
</template>

<script>
export default {
  data () {
    return {
      easter: false,
      seconds: 0,
      inside: false
    }
  },

  methods: {
    ee () {
      setInterval(() => {
        this.seconds += 1
      }, 1000)
      if (this.seconds >= 5 {
        this.easter = true
      }
      this.inside = true
    },

    reset () {
      this.seconds = 0
      this.inside = false
    }
  }
}

我的问题是 this.seconds 不会根据 Vue 控制台递增，我不太明白为什么。另外，this.inside 也保持为 false。但是如果我想在函数里面设置一个console.log()，就可以不费事的触发

我错过了什么？

提前致谢

Answer 1

你的代码有一些语法错误和一些薄弱的逻辑。

尝试以下...

<template>
 <!-- Some code -->
<div class="side-message" @mouseover="ee" @mouseleave="reset">
  <h1 v-if="easter" :class="easter ? 'ee' : ''">[ HYPE INTENSIFIES ]</h1>
  <p v-else v-html="replace($t('contact.intro'))"></p>
</div>
<!-- Rest of code -->
</template>

<script>
export default {
  data () {
    return {
      timeInterval: null,  // to control the timeout alarm so that it doesn't run forever even when not needed
      easter: false,
      seconds: 0,
      inside: false
    }
  },

  methods: {

    // will stop incrementing seconds (if already running)
    stopTimer(){
        if (this.timeInterval)
          clearInterval(this.timeInterval);  
    },

    ee () {
      this.stopTimer();

      this.timeInterval = setInterval(() => {
        this.seconds += 1;
        if (this.seconds >= 5) {
            this.easter = true;
            this.stopTimer();
        }
      }, 1000);

      this.inside = true;
    },

    reset () {
      this.seconds = 0;
      this.inside = false;
      this.stopTimer();
    }
  }
}

如何仅在使用 VueJS 悬停 div 时增加数字？

How do I increment a number only when hovering a div with VueJS?

javascript

mouseevent

vue.js