VUE中的无限循环代码解析


Posted in Javascript onSeptember 22, 2017

代码如下所示:

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

VUE中的无限循环代码解析

导致无限循环的原因: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中的无限循环代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 #Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 #Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
php 字符串替换的方法
2012/01/10 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
javascript 数组排序函数
2009/08/20 Javascript
取选中的radio的值
2010/01/11 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python单元测试实例详解
2018/05/25 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
2014年文学毕业生自我鉴定
2014/04/23 职场文书
学雷锋宣传标语
2014/06/25 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
公务员年终个人总结
2015/02/12 职场文书
党小组评议意见
2015/06/02 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL