快捷導(dǎo)航

VUE中的無(wú)限循環(huán)代碼解析

更新時(shí)間：2017年09月22日 11:48:14 作者：weixin_38788947

本文通過(guò)實(shí)例代碼給大家介紹了vue中的無(wú)限循環(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)致無(wú)限循環(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中的無(wú)限循環(huán)代碼解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

解決vue一個(gè)頁(yè)面中復(fù)用同一個(gè)echarts組件的問(wèn)題
這篇文章主要介紹了解決vue一個(gè)頁(yè)面中復(fù)用同一個(gè)echarts組件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3.0中sass全局的使用過(guò)程
這篇文章主要介紹了vue3.0中sass全局的使用過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單，其中核心代碼在于disabled，代碼簡(jiǎn)單易懂需要的朋友可以參考下
2022-11-11
優(yōu)化Vue template中大量條件選擇v-if的方案分享
本文我們將給大家詳細(xì)的講解一下如何優(yōu)化Vue template 中的大量條件選擇v-if,文中通過(guò)代碼示例介紹的非常詳細(xì),有詳細(xì)的優(yōu)化方案,感興趣的朋友可以參考閱讀下
2023-07-07
vue中關(guān)于template報(bào)錯(cuò)等問(wèn)題的解決
這篇文章主要介紹了vue中關(guān)于template報(bào)錯(cuò)等問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實(shí)現(xiàn)記事本小功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue替代vuex的存儲(chǔ)庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue替代vuex的存儲(chǔ)庫(kù)Pinia，聽(tīng)說(shuō)pinia與vue3更配,便開(kāi)啟了vue3的學(xué)習(xí)之路，pinia 和 vuex 具有相同的功效，是 Vue 的存儲(chǔ)庫(kù)，它允許您跨組件/頁(yè)面共享狀態(tài)
2022-09-09