快捷導(dǎo)航

Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題

更新時間：2020年07月30日 09:30:51 作者：喜歡前端的小北

這篇文章主要介紹了Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue中data定義

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

在vue中使用定時器如下 mounted是鉤子函數(shù)

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

這是為什么呢？

原因就是：定時器的this是指向 window的。

那有什么方法來解決這個問題呢？答案是有的,兩種

第一種：

用箭頭函數(shù)：箭頭函數(shù)中的this指向是固定不變（定義函數(shù)時的指向），在vue中指向vue;

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

第二種：

使用 var that = this ,就可以正常調(diào)用了。

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

補(bǔ)充知識：vue 根據(jù)指定字段排序使用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中的數(shù)據(jù)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue之綁定class樣式與style樣式方式
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-09-09
詳解vue保存自動格式化換行
這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
簡化版的vue-router實(shí)現(xiàn)思路詳解
這篇文章主要介紹了簡化版的vue-router,需要的朋友可以參考下
2018-10-10
Vue3+Three.js實(shí)現(xiàn)為模型添加點(diǎn)擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點(diǎn)擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標(biāo)位置；然后,創(chuàng)建一個Raycaster對象來投射光線
2024-10-10
Vue實(shí)現(xiàn)拖拽式分割布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue3 template轉(zhuǎn)為render函數(shù)過程詳解
在 Vue 中,template 模板是我們編寫組件的主要方式之一,而 Vue 內(nèi)部會將這些模板轉(zhuǎn)換為 render 函數(shù),render 函數(shù)是用于創(chuàng)建虛擬 DOM 的函數(shù),通過它,Vue 能夠高效地追蹤 DOM 的變化并進(jìn)行更新,下面我會通俗易懂地詳細(xì)解釋 Vue 如何將 template 轉(zhuǎn)換為 render 函數(shù)
2024-10-10
淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
VUE項(xiàng)目中SASS的使用及說明
這篇文章主要介紹了VUE項(xiàng)目中SASS的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯誤并且美化時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11