VUE中的无限循环代码解析
程序员文章站
2022-04-09 21:41:50
代码如下所示：
代码如下所示：
<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中的无限循环代码解析，希望对大家有所帮助
上一篇： 原生js中ajax访问的实例详解
下一篇： javascript计算渐变颜色的实例
推荐阅读
-
Vue中的无限加载vue-infinite-loading的方法
-
javascript中利用数组实现的循环队列代码_javascript技巧
-
mysql-请问：用java代码把不同的excel形式加载到MySQL数据库中（循环判断空就停止）？谢谢！
-
mysql-请问：用java代码把不同的excel形式加载到MySQL数据库中（循环判断空就停止）？谢谢！
-
解析PHP中的crypt()函数(附代码实例)
-
iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码
-
Android viewpager中动态添加view并实现伪无限循环的方法
-
Java中Integer.valueOf,parsetInt() String.valueOf的区别和结果代码解析
-
在Java代码中解析html,获取其中的值方法
-
深入解析Vue.js中v-bind v-model的使用和区别