代码如下所示:


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

导致无限循环的原因:flagName改变导致视图更新,视图更新又导致 dealFun()函数不停执行,进而flagName再次更新;循环往复;

解决办法:(使用全局变量)


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

总结

以上所述是小编给大家介绍的VUE中的无限循环代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

vue 无限循环 vue 循环
文章分类
相关文章