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>

導(dǎo)致無限循環(huán)的原因：flagName改變導(dǎo)致視圖更新，視圖更新又導(dǎo)致 dealFun()函數(shù)不停執(zhí)行，進而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)代碼解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)滾動條到頂部或者到指定位置
這篇文章主要介紹了vue實現(xiàn)滾動條到頂部或者到指定位置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue實現(xiàn)無縫滾動的示例詳解
這篇文章主要為大家詳細介紹了vue非組件如何實現(xiàn)列表的無縫滾動效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-09-09
基于Vue.js+Nuxt開發(fā)自定義彈出層組件
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
vue的rules驗證部分可以部分又失效的原因及解決方案
vue的rules驗證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個特別的,那就是prop沒有寫全,導(dǎo)致驗證某一個失效,接下來就跟小編一起來看看這個失效的原因和解決方案吧
2023-11-11
vue3 vite如何讀取文件內(nèi)容
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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ù)(最新推薦)
如果想要在接口請求方法的外面拿到請求的結(jié)果,再做相關(guān)數(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)多層嵌套路由的導(dǎo)航的詳細指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時非常有用,需要的朋友可以參考下
2024-10-10
vue-router 起步步驟詳解
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03