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中的資料問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。