VUE中无限循环代码分享

来源：动视网责编：小采时间：2020-11-27 20:04:02

VUE中无限循环代码分享

VUE中无限循环代码分享:本文主要通过实例代码给大家介绍了vue中的无限循环，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。代码如下所示：<template> <p id=""> <ul v-for="(item,inde

推荐度：

点击下载本文 文档为doc格式

导读VUE中无限循环代码分享:本文主要通过实例代码给大家介绍了vue中的无限循环，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。代码如下所示：<template> <p id=""> <ul v-for="(item,inde

本文主要通过实例代码给大家介绍了vue中的无限循环，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

代码如下所示：

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

VUE中无限循环代码分享

推荐度：

点击下载本文 文档为doc格式

标签： VUE 代码无限

热门焦点

VUE中无限循环代码分享

VUE中无限循环代码分享

VUE中无限循环代码分享

最新推荐

猜你喜欢

热门推荐