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