箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;
普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁。
 
箭头函数:
 let timerOne = setInterval(() => {
    console.log(this);// vue
}, 1000);
let timerTwo = setInteval(function () {
    console.log(this); // window,因为setInterval()函数是window对象的函数
}, 1000);
打印结果:
 
 let timer = setInterval(() => {
  this.myFunc();
},1000);
myFunc(){
  console.log('sunyu is handsome !');
}
不用箭头函数也可以搞定:
 myFunc(){
  console.log(vm.name);// name为已经在created中声明的变量
};
let vm = this;
let timer = setInteval(function () {
       myFunc();
}, 1000) ;
最后温馨提示不要忘了清除定时器哦!
 

vue中使用定时器时this指向的更多相关文章

  1. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  2. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  3. vue中prop传值时加不加v-bind(冒号:)

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  4. vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...

  5. 记录在vue中使用jsx时踩过的坑

    使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transfo ...

  6. vue中清除定时器

    1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...

  7. Vue中使用定时器setInterval和setTimeout

    js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一.循环执行(setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次 ...

  8. vue中使用ts时如何导入mixins

    方法一 // mixins.ts import { Vue } from "vue-property-decorator"; export class TableSelect ex ...

  9. vue中刷新页面时去闪烁,提升体验方法

    首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true 随后添加provide()以及reload方法,如下: expo ...

随机推荐

  1. Netty服务端创建流程及组件职责

    public class NettyServer { public static void main(String[] args) throws InterruptedException { NioE ...

  2. springboot笔记02——快速入门quickstart

    前言 学习一个新的框架,往往会用一个quickstart快速入门,这次就写一下springboot的quickstart程序. 开发环境 JDK 1.8 Springboot 2.1.6 Maven ...

  3. 关于Git无法提交 index.lock的解决办法

    今天提交代码时,在一次提交,莫名其妙没成功后,再次用git commit -a命令时,出现以下错误,无论是用git还是TortoiseGit都会出现以下这个问题.. $ git commit -a f ...

  4. 定时任务cron表达式详解

    参考自:https://blog.csdn.net/fanrenxiang/article/details/80361582 一 cron表达式 顺序 秒 分 时 日期 月份 星期 年(可选) 取值 ...

  5. PDA无线移动开单智能新生活,省时、省心、省力

    纯手工4个小时 VS移动PDA开单10分钟 无论你是营业办公还是需要上门接货,开单都是一件重要且繁琐的事情.我们了解到传统物流业务运营都是通过手抄单.表格.补录运单来重复操作每一笔业务,手动填写纸质单 ...

  6. Nginx跨域访问场景配置和防盗链

    跨域访问控制 跨域访问 为什么浏览器禁止跨域访问 不安全,容易出现CSRF攻击! 如果黑客控制的网站B在响应头里添加了让客户端去访问网站A的恶意信息,就会出现CSRF攻击 Nginx如何配置跨域访问 ...

  7. C# 中写得很不错的一段代码摘出来

    private void LikeMyworkEvent(EditedImg img, bool islike) //点赞自己的作品 { if (ApplicationModel.userInfo ! ...

  8. JAVA设计模式之单例模式(单件模式)—Singleton Pattern

    1.什么是单例模式? <Head First 设计模式>中给出如下定义:确保一个类只有一个实例,并提供一个全局访问点. 关键词:唯一实例对象. 2.单例模式的实现方式: 2.1 懒汉式 对 ...

  9. 并发编程:Thread和Runable-01

      1.继承Thread类(不推荐) 代码很简单,就不说了 public class ThreadTest02 { public static void main(String[] args) { n ...

  10. 多任务案例--文件夹copy.py

    import os import multiprocessing def copy_file(q,file_name,new_folder_name,old_folder_name): with op ...