Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問(wèn)題
vue中data定義
data() { return { isok:10,}}
在vue中使用定時(shí)器 如下 mounted是鉤子函數(shù)
mounted(){ console.log(this.isok) //能獲取isok 10 setInterval(function(){ console.log(this.isok) //不能獲取 isok}, 3000); }
這是為什么呢?
原因就是:定時(shí)器的this是指向 window的。
那有什么方法來(lái)解決這個(gè)問(wèn)題呢?答案是有的,兩種
第一種:
用箭頭函數(shù):箭頭函數(shù)中的this指向是固定不變(定義函數(shù)時(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ǔ)充知識(shí):vue 根據(jù)指定字段排序使用computed 方法
我就廢話(huà)不多說(shuō)了,大家還是直接看代碼吧~
<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(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)3. MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類(lèi)型對(duì)應(yīng)關(guān)系說(shuō)明4. jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲5. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建( Dovecot )6. idea自定義快捷鍵的方法步驟7. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法8. IntelliJ IDEA設(shè)置背景圖片的方法步驟9. django創(chuàng)建css文件夾的具體方法10. css代碼優(yōu)化的12個(gè)技巧
