箭头函数中的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. DotNet 使用阿里云媒体转码服务

    公司项目中一部分文件放到了阿里云 OSS 上,其中有些音频文件是 amr 类型的,在后期使用的时候比较麻烦,所以需要转换成 mp3 的文件,方便以后使用.本来想使用 ffmpeg 处理,但由于文件都存 ...

  2. css 居中 父子元素

    居中:是子元素相对于在父元素里面居中.父子宽度都固定. A:水平居中: ①给子元素设置一个宽度后.在给其水平方向的margin设置auto,子元素会在父元素水平方向的剩余空间,左右两边平均分配,也就左 ...

  3. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

  4. SMARTY的知识

    smarty的原理: <?php class Smarty { $ldelimiter = "{";//左分隔符 $rdelimiter = "}";// ...

  5. 直接插入排序算法(java)

    直接插入排序是将未排序的数据插入至已排好序序列的合适位置. 具体流程如下: 1.首先比较数组的前两个数据,并排序: 2.比较第三个元素与前两个排好序的数据,并将第三个元素放入适当的位置: 3.比较第四 ...

  6. (坑爹错误)记录prometheus中配置alertmanager.yml一次报错

    global: resolve_timeout: 5m #处理超时时间,默认为5min smtp_smarthost: 'smtp.sina.com:25' # 邮箱smtp服务器代理 smtp_fr ...

  7. TCP/IP三次挥手,四次断开(精简)

    很多协议都是基于TCP/IP协议的基础之上进行工作的,可能我们了解这些原理近期看来并无实际作用,因为它不像如一些web服务器配置一样,配置了我就可以使用,就可以提供服务. 但是从我们长远发展角度来看, ...

  8. 解析CentOS 7中系统文件与目录管理

    Linux目录结构 Linux目录结构是树形的目录结构 根目录 所有分区.目录.文件等的位置起点 整个树形目录结构中,使用独立的一个"/"表示 常见的子目录 目录 目录名称 目录 ...

  9. Android和kali的互操作性

    1.手机上讲kali Linux系统安装上面实现小巧方便的移动渗透测试工具 其实我们都知道 Android操作系统是基于linux 开发的,这就为我们将kali linux 系统移植到手机上提供了原理 ...

  10. python访问aws-S3服务

    创建本地 AWS 凭证文件 登录 AWS 管理控制台 并通过以下网址打开 IAM 控制台 https://console.amazonaws.cn/iam/. 创建一个新用户,其权限仅限于您希望您的代 ...