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 相关文章推荐
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
jQuery表单验证之密码确认
May 22 jQuery
vue-router单页面路由
Jun 17 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 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
3
2006/10/09 PHP
mysql总结之explain
2012/02/27 PHP
php全排列递归算法代码
2012/10/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
对python多线程与global变量详解
2018/11/09 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python多进程使用函数封装实例
2020/05/02 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
谈谈python垃圾回收机制
2020/09/27 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
策划总监岗位职责
2014/02/16 职场文书
欢度春节标语
2014/07/01 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL