Heim >Web-Frontend >js-Tutorial >Endlosschleifen-Code-Sharing in VUE

Endlosschleifen-Code-Sharing in VUE

小云云
小云云Original
2018-02-03 13:19:093378Durchsuche

Dieser Artikel stellt hauptsächlich die Endlosschleife in Vue anhand von Beispielcode vor. Der Code ist einfach und leicht zu verstehen, und Freunde, die ihn benötigen, können darauf zurückgreifen.

Der Code lautet wie folgt:

<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>

Der Grund für die Endlosschleife: Die Änderung von flagName führt dazu, dass die Ansicht aktualisiert wird , und die Ansichtsaktualisierung führt dazu, dass die Funktion dealFun( ) weiterhin ausgeführt wird und der Zyklus erneut aktualisiert wird.

Lösung: (globale Variablen verwenden)

<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>

Verwandte Empfehlungen:

EasyUI Tree Tree Component Endlosschleifen-Beispielanalyse

Beispielerklärung CSS3 zum Erzielen eines nahtlosen Scrollens einer Endlosschleife

PHP erreicht eine Endlosschleife, um ein MySQL-Beispiel einer Methode in Daten zu erhalten

Das obige ist der detaillierte Inhalt vonEndlosschleifen-Code-Sharing in VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn