Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題
更新時(shí)間：2020年07月30日 09:30:51 作者：喜歡前端的小北
這篇文章主要介紹了Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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的。
那有什么方法來解決這個(gè)問題呢？答案是有的,兩種
第一種：
用箭頭函數(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 方法
我就廢話不多說了，大家還是直接看代碼吧~
<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ù)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue封裝圖片滑塊驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
解決$store.getters調(diào)用不執(zhí)行的問題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實(shí)現(xiàn)頁面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下2024-01-01
15 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實(shí)現(xiàn)是我們做Web應(yīng)用時(shí)候最為常見的應(yīng)用場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
關(guān)于eslint+prettier+husky的配置及說明
這篇文章主要介紹了關(guān)于eslint+prettier+husky的配置及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
小白教程|一小時(shí)上手最流行的前端框架vue（推薦）
這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04