在网上看到一篇Vue中使用定时器setInterval和setTimeou讲解得很好,但是放在自己代码中却不能实现定时器的作用,后来了解到是因为vue中要用箭头函数才能使setInterval起作用
解决方案
this.timer = setInterval(this.get, 1000);
修改为
var _this = this; //注意,要有,因为有箭头函数所以this作用域不在是vue,而是定时器。我们要调用的是vue中的函数
this.timer = setInterval(() => {
_this.get();
}, 3000);
},
完整代码(建议细看代码注释)
<template>
<section>
<h1>hello world~</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
};
},
methods: {
get() {
this.value ++;
console.log(this.value);
}
},
mounted() {
//这行代码是不起用的,错误的 this.timer = setInterval(this.get,