VUE中的無限循環(huán)代碼解析
更新時(shí)間：2017年09月22日 11:48:14 作者：weixin_38788947
本文通過實(shí)例代碼給大家介紹了vue中的無限循環(huán)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
代碼如下所示：
<template>
<div id="">
<ul v-for="(item,index) in listaaa">
<li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "",
data(){
return {
listaaa: [{
cdate: '123'
},
{
cdate: '456'
},
],
flagName: ''
}
},
methods: {
dealFun(arg, index) {
console.log('---------------------------')
if (arg == this.flagName) {
return false
} else {
this.flagName = arg
return true
}
}
},
}
</script>
<style scoped>
</style>
導(dǎo)致無限循環(huán)的原因：flagName改變導(dǎo)致視圖更新，視圖更新又導(dǎo)致 dealFun()函數(shù)不停執(zhí)行，進(jìn)而flagName再次更新；循環(huán)往復(fù)；
解決辦法：（使用全局變量）
<template>
<div id="">
<ul v-for="(item,index) in listaaa">
<li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
</ul>
</div>
</template>
<script>
var flagName;
export default {
name: "",
data(){
return {
listaaa: [{
cdate: '123'
},
{
cdate: '456'
},
],
// flagName: ''
}
},
methods: {
dealFun(arg, index) {
console.log('---------------------------')
if (arg == flagName) {
return false
} else {
flagName = arg
return true
}
}
},
}
</script>
<style scoped>
</style>
總結(jié)
以上所述是小編給大家介紹的VUE中的無限循環(huán)代碼解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置
這篇文章主要介紹了vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)無縫滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue非組件如何實(shí)現(xiàn)列表的無縫滾動(dòng)效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒有寫全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來就跟小編一起來看看這個(gè)失效的原因和解決方案吧2023-11-11
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)動(dòng)態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
VUE獲取Promise對(duì)象中PromiseResult中的數(shù)據(jù)(最新推薦)
如果想要在接口請(qǐng)求方法的外面拿到請(qǐng)求的結(jié)果,再做相關(guān)數(shù)據(jù)處理,往往我們拿到的卻是一個(gè)Promise對(duì)象,那么遇到這樣的問題如何解決呢,下面小編給大家?guī)砹薞UE?項(xiàng)目中?如何獲取Promise對(duì)象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧2023-10-10
vue-extend和vue-component注冊(cè)一個(gè)全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊(cè)一個(gè)全局組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue Router實(shí)現(xiàn)多層嵌套路由的導(dǎo)航的詳細(xì)指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實(shí)現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個(gè)多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時(shí)非常有用,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03