您好,登錄后才能下訂單哦!
這篇文章主要講解了Vue如何解決mounted不能獲取到data中的數(shù)據(jù)問題,內(nèi)容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
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 ,就可以正常調用了。
mounted(){ var that=this; setInterval(()=>{ console.log(that.isok) }, 3000); }
補充知識: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>
看完上述內(nèi)容,是不是對Vue如何解決mounted不能獲取到data中的數(shù)據(jù)問題有進一步的了解,如果還想學習更多內(nèi)容,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。