Vue(定时器)解决mounted不能获取到data中的数据问题


Posted in Javascript onJuly 30, 2020

vue中data定义

data() {
  return {
  isok:10,
}
}

在vue中使用定时器 如下 mounted是钩子函数

mounted(){
 
 console.log(this.isok)  //能获取isok 10
 setInterval(function(){
 console.log(this.isok) //不能获取 isok
}, 3000);
 
}

这是为什么呢?

原因就是:定时器的this是指向 window的。

那有什么方法来解决这个问题呢?答案是有的,两种

第一种:

用箭头函数:箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;

mounted(){
 setInterval(()=>{ consolog.log(this.isok) }, 3000);
 }

第二种:

使用 var that = this ,就可以正常调用了。

mounted(){
  var that=this;
  setInterval(()=>{
  console.log(that.isok)
  }, 3000);
 }

补充知识:vue 根据指定字段排序使用computed 方法

我就废话不多说了,大家还是直接看代码吧~

<div id="app">
   <ul>
    <li v-for="(stu,index) in students1">{{stu}}</li>
   </ul>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",
    data:{
     students:[
      {name:"小a",age:20},
      {name:"小b",age:21},
      {name:"小c",age:18},
      {name:"小d",age:19},
      {name:"小f",age:18}
     ]
    },
    computed:{
     students1:function(){
      return sortKey(this.students,'age')
     }
    }
   })
   function sortKey(array,key){
    return array.sort(function(a,b){
     var x = a[key];
     var y = b[key];
     return ((x<y)?-1:(x>y)?1:0)
    })
   }
  </script>

以上这篇Vue(定时器)解决mounted不能获取到data中的数据问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
You might like
解析php常用image图像函数集
2013/06/24 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php自定义时间转换函数示例
2016/12/07 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
如何撰写一封出色的求职信
2014/04/27 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2015年项目工作总结
2015/04/29 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
学者《孟子》名人名言
2019/08/09 职场文书