VUE中無限循環程式碼分享

本文主要透過實例程式碼給大家介紹了vue中的無限循環，程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能幫助到大家。

程式碼如下：

<template>
<p id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if=&#39;dealFun(item.cdate,index)&#39;>{{item.cdate}}</li>
 </ul>
</p>
</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>

導致無限迴圈的原因：flagName改變導致視圖更新，視圖更新又導致dealFun()函數不停地執行，進而flagName再次更新；循環往復；

解決方法：（使用全域變數）

<template>
<p id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if=&#39;dealFun(item.cdate,index)&#39;>{{item.cdate}}</li>
 </ul>
</p>
</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>

相關推薦：

EasyUI Tree樹元件無限循環實例分析

實例講解CSS3實現無限迴圈的無縫捲動

##php實現無限迴圈取得MySQL中資料的方法範例

以上是VUE中無限循環程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！